JSFiddle - React, Tailwind, and code Playground

by kangismet

HTML

<div id='tahunbaru'>
    <span id='countdown'></span>
</div>

CSS

body {
  background:#2f3135;
}
#tahunbaru {
    background:#739bc8;
    color:yellow;
    font-size:150%;
    text-transform:uppercase;
    text-align:center;
    padding:20px;
    font-weight:normal;
    border-radius:5px;
    line-height:1.8em;
    font-family: Arial, snas-serif;
}
.digit {color:white}

JavaScript

var target_date = new Date("April 13, 2021").getTime();
var days, hours, minutes, seconds;
var countdown = document.getElementById("countdown");
setInterval(function () {
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
    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);
    countdown.innerHTML = days + " <span class=\'digit\'>hari</span> " + hours + " <span class=\'digit\'>jam</span> " + minutes + " <span class=\'digit\'>menit</span> " + seconds + " <span class=\'digit\'>detik menuju <span class=\'juduls'>Ramadhan 1442 H</span>";
}, 1000);