JSFiddle - React, Tailwind, and code Playground
HTML
<div id="counter-container">
<div class="counter-box">
<div class="counter"><p id="d" class="counter-p">#</p></div>
<p class="counter-box-p">days</p>
</div>
<div class="counter-box">
<div class="counter"><p id="h" class="counter-p">#</p></div>
<p class="counter-box-p">hours</p>
</div>
<div class="counter-box">
<div class="counter"><p id="m" class="counter-p">#</p></div>
<p class="counter-box-p">minutes</p>
</div>
<div class="counter-box">
<div class="counter"><p id="s" class="counter-p">#</p></div>
<p class="counter-box-p">seconds</p>
</div>
JavaScript
function counter(count) {
countdown = setInterval(function(){
var temp;
$("p#d").html(Math.floor(count/(60*60*24)));
temp = count%(60*60*24);
$("p#h").html(Math.floor(temp/(60*60)));
temp = count%(60*60);
$("p#m").html(Math.floor(temp/(60)));
temp = count%(60);
$("p#s").html(temp);
if (count == 0) {
alert("time's up");
clearInterval(countdown);
}
count--;
}, 1000);
}
counter(60*60*24*2);