JSFiddle - React, Tailwind, and code Playground

by moshfeu

HTML

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div class="text-center">
        <div id="clockdiv">
            <div>
                <span class="days" id="day"></span>
                <div class="smalltext">Days</div>
            </div>
            <div>
                <span class="hours" id="hour"></span>
                <div class="smalltext">Hours</div>
            </div>
            <div>
                <span class="minutes" id="minute"></span>
                <div class="smalltext">Minutes</div>
            </div>
            <div>
                <span class="seconds" id="second"></span>
                <div class="smalltext">Seconds</div>
            </div>
        </div>
    </div>

    <script src="main.js" async defer></script>
</body>

</html>

CSS

body {
    text-align: center;
    background: #373737;
    font-family: sans-serif;
    font-weight: 100;
}

h1 {
    color: #396;
    font-weight: 100;
    font-size: 40px;
    margin: 40px 0px 20px;
}

.Msg {
    font-size: 18px;
    color: #fff
}

#clockdiv {
    font-family: sans-serif;
    color: #000000;
    /* display: inline-block; */
    font-weight: 100;
    text-align: center;
    font-size: 30px;
    display: none;
}

#clockdiv>div {
    padding: 10px;
    border-radius: 5px;
    background: #f9a936;
    display: inline-block;
}

#clockdiv div>span {
    padding: 15px;
    border-radius: 5px;
    background: #e95a2c;
    display: inline-block;
}

.smalltext {
    padding-top: 5px;
    font-size: 16px;
}

JavaScript

var deadline = new Date("mar 6, 2019 09:12:25").getTime();

var x = setInterval(function check() {
		debugger;		
    var now = new Date().getTime();
    var t = deadline - now;
    if (t > 0) {
    	var days = Math.floor(t / (1000 * 60 * 60 * 24));
      var hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((t % (1000 * 60)) / 1000);
      document.getElementById("day").innerHTML = days;
      document.getElementById("hour").innerHTML = hours;
      document.getElementById("minute").innerHTML = minutes;
      document.getElementById("second").innerHTML = seconds;
    } else {
        clearInterval(x);
        document.getElementById("clockdiv").innerHTML =
            "<p class='Msg'>Msg after!</p>";
        //document.getElementById("day").innerHTML = "0";
        //document.getElementById("hour").innerHTML = "0";
        //document.getElementById("minute").innerHTML = "0";
        //document.getElementById("second").innerHTML = "0";
    }
    document.getElementById('clockdiv').style.display = 'inline-block';
    return check;
}(), 1000);