JSFiddle - React, Tailwind, and code Playground
HTML
<div class="main">
<div class="container">
<div id="countdown" align="center">
</div>
</div>
</div>
CSS
.main {
width:100%;
height:400px;
background-image: url("https://assets.imgix.net/examples/blueberries.jpg?auto=format&dpr=1&fit=crop&h=580&ixjsv=2.2.3&q=60&w=1140");
}
.container {
margin: 0 auto;
width: 500px;
height: auto;
margin-top: 100px;
}
#countdown {
font-size: 64px;
letter-spacing: 10px;
color: #fff;
}
JavaScript
CountDownTimer('06/01/2016 06:00 AM', 'countdown');
function CountDownTimer(dt, id)
{
var end = new Date(dt);
var _second = 1000;
var _minute = + _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById(id).innerHTML = 'end';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('countdown').innerHTML = days + ' ';
document.getElementById('countdown').innerHTML += hours + ' ';
document.getElementById('countdown').innerHTML += minutes + ' ';
document.getElementById('countdown').innerHTML += seconds + ' ';
}
timer = setInterval(showRemaining, 1000);
}