JSFiddle - React, Tailwind, and code Playground
HTML
<div class="counter">
<span class="dd"></span> :
<span class="hh"></span> :
<span class="mm"></span> :
<span class="ss"></span>
</div>
CSS
.counter {
font-size: 3em;
font-weight: bold;
}
JavaScript
var endAction = new Date(2014, 10, 15);
var dd = document.querySelector('.dd');
var hh = document.querySelector('.hh');
var mm = document.querySelector('.mm');
var ss = document.querySelector('.ss');
function counter(endAction) {
var currentDate = new Date();
var timer = endAction - currentDate;
var days = parseInt(timer / (60 * 60 * 1000 * 24));
if (days < 10) days = '0' + days;
days = days.toString();
dd.innerHTML = days;
var hours = parseInt(timer / (60 * 60 * 1000)) % 24;
if (hours < 10) hours = '0' + hours;
hours = hours.toString();
hh.innerHTML = hours;
var minutes = parseInt(timer / (1000 * 60)) % 60;
if(minutes < 10) minutes = '0' + minutes;
minutes = minutes.toString();
mm.innerHTML = minutes;
var seconds = parseInt(timer / 1000) % 60;
if (seconds < 10) seconds = '0' + seconds;
seconds = seconds.toString();
ss.innerHTML = seconds;
}
setInterval(function() {
counter(endAction);
}, 1000);