JSFiddle - React, Tailwind, and code Playground

by dafin defandaky

HTML

<div class='kurangi-ramadhan'>
    <img alt='menuju hari raya idul fitri' src='http://2.bp.blogspot.com/-857Gh0b-bfg/UdoelwzrmTI/AAAAAAAADBc/JkctRkwOxdQ/s1600/bedug.jpg'/><br/>
<span class="Menuju-Lebaran">
<span id="countdown"></span>
<script type='text/javascript'>
//<![CDATA[
var target_date = new Date("Jul 27, 2014").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=\'angka-count\'>hari</span> " + hours + " <span class=\'angka-count\'>jam</span> "
  + minutes + " <span class=\'angka-count\'>menit</span> " + seconds + " <span class=\'angka-count\'>menuju</span> <span class=\'momentum-raya\'>Idul Fitri 1435H</span>";   
}, 1000);
//]]>
</script> 
</span></div>

CSS

.Menuju-Lebaran {
    color:darkorange;
}
.kurangi-ramadhan {
    background:#333;
    font-size:130%;
    text-transform:uppercase;
    text-align:center;
    margin:15px 5px;
    padding:20px 0px;
    font-weight:normal;
    border:5px solid #ddd;
    line-height:1.8em;
    font-family:Trebuchet MS, Verdana, Arial, sans-serif;
}
.kurangi-ramadhan img {padding:10px;max-width:100%;border:3px solid #666;background:#fff;
    
}
.angka-count {
    color:#fff;
}
.momentum-raya {
    color:#fff;
}