JSFiddle - React, Tailwind, and code Playground
HTML
<div style="height:244px; width:244px; background-image:url('http://images.ecwid.com/images/1033402/32367972.jpg'); background-repeat:no-repeat; background-position:center; border-width:1; border-style:solid;">
<div style="font-family: Eurostile,sans-serif; font-size: 14px; color:white; position: relative; text-align: center; top:144; text-shadow: black 0.0em 0.1em 0.2em">
days : hours : mins : secs
</div>
<div id=kycxwcclock style="font-family: Eurostile,sans-serif; font-size: 30px; color:black; position: relative; text-align: center; top:125; text-shadow: white 0.0em -0.1em 0.2em">
000 00:00:00
</div>
<div style="font-family: Eurostile,sans-serif; font-size: 30px; color:black; position: relative; top: 125; text-align: center; text-shadow: white 0.0em -0.1 em 0.2em">
until
</div>
</div>
JavaScript
var kycxwcClock;
//Noon Saturday October 2nd
//var kycxwcStart=1359824400;
//Midnight Friday/Saturday October 1st/2nd
var kycxwcStart=1359781200;
function kycxwcTimer() {
setTimeout(kycxwcTimer, 1000);
var d = new Date();
var left=kycxwcStart-Math.floor(d.getTime()/1000);
if (left<0) {
if (left<(0-86400*2)) {
kycxwcClock.innerHTML="IT'S ALREADY OVER.";
} else {
kycxwcClock.innerHTML="IT'S HAPPENING NOW!!!.";
}
} else {
var days = Math.floor(left/86400);
left -= days*86400;
days = ("00" + days.toString()).slice(-3);
var hours = Math.floor(left/3600);
left -= hours*3600;
hours = ("0" + hours.toString()).slice(-2);
var mins = Math.floor(left/60);
left -= mins*60;
mins = ("0" + mins.toString()).slice(-2);
var secs = left;
secs = ("0" + secs.toString()).slice(-2);
kycxwcClock.innerHTML = days + " " + hours + ":" + mins + ":" + secs;
}
}
kycxwcClock = document.getElementById("kycxwcclock");
setTimeout(kycxwcTimer, 1000);