JSFiddle - React, Tailwind, and code Playground

by velmurugansp

HTML

<h2>
Digital Clock
</h2>
<h1>
<span id="hh">HH</span>
<span>:</span>
<span id="mm">MM</span>
<span>:</span>
<span id="ss">SS</span>
</h1>

CSS

h2{
  text-align:center;
}
h1, h2{
  text-align:center;
  border: solid 2px;
  max-width: 300px;
  margin: 0 auto;
  
}

JavaScript

function formatNumber(number){
	return 	(number <= 9) ?		"0" + number : number ;
}

function updateTime(){
  var currentTime = new Date(),
  		hhElement = document.getElementById('hh'),
      mmElement = document.getElementById('mm'),
      ssElement = document.getElementById('ss');
	
  hhElement.innerText = formatNumber(currentTime.getHours());
  mmElement.innerText = formatNumber(currentTime.getMinutes());
  ssElement.innerText = formatNumber(currentTime.getSeconds());
}

updateTime(); //Function Call

setInterval(updateTime, 1000); // Arugument data