JSFiddle - React, Tailwind, and code Playground

by Nabaraj Saha

HTML

<div id="showtime"></div>

CSS

#showtime{
  display:flex;
}
.timeBox{
  display: block;
  width:50px;
  padding:10px;
  margin:2px;
  color:#ffffff;
  font-size:15px;
  text-align:center;
  font-weight:bold;
}
.timeBox:nth-child(2n){
  background-color:green;
}
.timeBox:nth-child(2n+1){
  background-color:red;
}

JavaScript

var clockData = "";

setInterval(()=>{
	var date = new Date();
	clockData = `<span class="timeBox">${date.getHours()}</span><span class="timeBox">${date.getMinutes()}</span><span class="timeBox">${date.getSeconds()}</span><span class="timeBox">${date.getHours()>=12?"PM":"AM"}</span>`
  document.querySelector("#showtime").innerHTML = clockData;
},1000)
document.querySelector("#showtime").innerHTML = clockData;