JSFiddle - React, Tailwind, and code Playground
HTML
<div id="timer1">
<div id="timer-header">До конца акции осталось:</div>
<div id="hours">
<div class="left"></div>
<div class="right"></div>
<div class="delimiter">:</div>
<div id="title-hours">часы</div>
</div>
<div id="minutes">
<div class="left"></div>
<div class="right"></div>
<div class="delimiter">:</div>
<div id="title-minutes">минуты</div>
</div>
<div id="seconds">
<div class="left"></div>
<div class="right"></div>
<div id="title-seconds">секунды</div>
</div>
</div>
CSS
#timer1 {
display:table-cell;
}
#timer1 > div:first-child {
margin: 0;
}
#timer1 div {
display:inline-block;
}
#timer-header {
display:block!important;
padding-bottom:15px;
text-align:center;
}
#timer1 div[id^="title-"] {
display:block;
text-align:center;
margin-left:-7px;
width:100%;
}
#timer1 #title-seconds {
margin:0;
}
.left, .right, .delimiter {
font-size:32px;
}
.left, .right {
background-color:#61890C;
color:white;
padding:5px;
}
.left {
margin-right: 2px;
}
.delimiter {
padding-left:0px;
}
JavaScript
StartCountDown("timer1", "07/31/3000 00:00");
function StartCountDown(myDiv, myTargetDate) {
var dthen = new Date(myTargetDate);
var dnow = new Date();
ddiff = new Date(dthen - dnow);
gsecs = Math.floor(ddiff.valueOf() / 1000);
CountBack(myDiv, gsecs);
}
function Calcage(secs, num1, num2) {
s = ((Math.floor(secs / num1)) % num2).toString();
if (s.length < 2) {
s = "0" + s;
}
return (s);
}
function CountBack(myDiv, secs) {
var timeArr = [],
holder;
if (secs > 0) {
timeArr.hours = Calcage(secs, 3600, 24).split('');
timeArr.minutes = Calcage(secs, 60, 60).split('');
timeArr.seconds = Calcage(secs, 1, 60).split('');
Object.keys(timeArr).map(function (key) {
holder = document.getElementById(key);
for (var i = 0; i < holder.childNodes.length; ++i) {
switch (holder.childNodes[i].className) {
case "left":
holder.childNodes[i].innerHTML = timeArr[key][0];
break;
case "right":
holder.childNodes[i].innerHTML = timeArr[key][1];
break;
default:
break;
}
}
});
setTimeout(function () {
CountBack(myDiv, secs - 1);
}, 990);
}
}