JSFiddle - React, Tailwind, and code Playground

by mattography

HTML

<div id="countdown"></div>

CSS

html {
    background: url(https://postmediacanadadotcom.files.wordpress.com/2013/01/house_of_cards_25648466.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#countdown{
    font-family: Trebuchet MS;
    color: #fff;
    font-size: 60px;
    position: relative;
    top: 100px;
    left: 100px;
}

JavaScript

// set the date we're counting down to
var target_date = new Date("Feb 27, 2015").getTime();
 
// variables for time units
var days, hours, minutes, seconds;
 
// get tag element
var countdown = document.getElementById("countdown");
 
// update the tag with id "countdown" every 1 second
setInterval(function () {
 
    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
 
    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;
     
    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;
     
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);
     
    // format countdown string + set tag value
    countdown.innerHTML = days + " day<br> " + hours + " hours<br> "
    + minutes + " minutes<br> " + seconds + " seconds";  
 
}, 0);