 <link href="https://fonts.cdnfonts.com/css/alarm-clock" rel="stylesheet">
<!--  <div class="jam-digital text-danger"> 
 	<div id="jam"></div>
 	<div id="unit"></div>
 </div> -->
 <center><strong><font size="12" class="jam-digital text-danger py-2"id="jam"></font></strong></center>

 <style type="text/css">  
 .jam-digital {
 	font-family: 'alarm clock', sans-serif; 
 	text-align: center;
 }  
 @media screen and (max-width: 100%){ 
 	.jam-digital {
 		width: 100%;
 		margin: 5% 5%;
 	} 
 }
</style>

<script type="text/javascript"> 

	function jam() {
		setInterval(function () {

			var waktu = new Date();
			var jam   = document.getElementById('jam');
			var hours = waktu.getHours();
			var minutes = waktu.getMinutes();
			var seconds = waktu.getSeconds();

			if (waktu.getHours() < 10)
			{
				hours = '0' + waktu.getHours();
			}
			if (waktu.getMinutes() < 10)
			{
				minutes = '0' + waktu.getMinutes();
			}
			if (waktu.getSeconds() < 10)
			{
				seconds = '0' + waktu.getSeconds();
			}
			jam.innerHTML  = hours + ':' + minutes + ':' + seconds;
			// jam.innerHTML  = '<span>' + hours + ':</span>'
			// + '<span>' + minutes + ':</span>'
			// + '<span>' + seconds +'</span>';


		}, 1000);
	}

	jam();

</script>