JSFiddle - React, Tailwind, and code Playground

by Artem

HTML

<ul id="time">
  <li id="hours">00</li>
  <li id="minutes">00</li>
  <li id="seconds">00</li>
</ul>

CSS

#time {
  font-family: Roboto, sans-serif;
  font-size: 16px;
  line-height: 24px;
  margin: 0;
  padding: 10px 20px;
  display: flex;
  list-style-type: none;
}

#time li {
}

#time li:not(:last-child)::after {
  content: ':';
}

JavaScript

var list = document.getElementById('time');
var li = list.getElementsByTagName('li');
var t = time();

function time () {

	function update (obj, date) {
  	var value;
  	for(var i in obj) {
    	value = eval('date.get' + i.charAt(0).toUpperCase() + i.slice(1) + '()');
      value = (value < 10) ? '0' + value : value;
      obj[i] = value;
    }	
  }
  
	var d = new Date();
  var t = {
  	hours: '',
    minutes: '',
    seconds: '',
  }
  update(t,d);
  li[0].textContent = t.hours;
  li[1].textContent = t.minutes;
  li[2].textContent = t.seconds;
  
  setTimeout(arguments.callee, 1000);
}