JSFiddle - React, Tailwind, and code Playground

by nathan

HTML

<div id="time">
  <span class="hour">0</span><span class="hour">0</span><span class="minute">0</span><span class="minute">0</span><span class="second">0</span><span class="second">0</span>
</div>

CSS

#time>span {
  width: 0.5em;
  display:inline-block;
}
#time>span:nth-child(even) {
  margin-right: 0.5em;
}
#time>span:nth-child(even):not(:last-child)::after {
  margin-left: 0.1em;
  margin-right: 0.1em;
  content: ":"
}

JavaScript

(function () {

	var elements = document.getElementById("time").children;
  
  setInterval(updateTime, 250);

	function updateTime() {
  	var i = 6,
    		parts,
    		time = new Date();
    parts = [
    	time.getHours(),
    	time.getMinutes(),
      time.getSeconds()];
    while (i--) {
    	if (i % 2) {
      	elements[i].innerHTML = parts[Math.floor(i/2)] % 10;
      } else {
      	elements[i].innerHTML = Math.floor(parts[Math.floor(i/2)] / 10)
      }
    }
  }
}());