JSFiddle - React, Tailwind, and code Playground

by Evgeniy Lukovsky

HTML

<div id="center">
    <div>Ведутся работы...</div>
    <div class="road_works"></div>
    <div>Осталось <span id="remaining"></span></div>
</div>

CSS

div#center{
    margin:100px auto;
    width:185px;
    height: 200px;
    font-family: sans;
}
div#center>div:first-child, div:last-child{
    text-align: center;
}

div#center>div.road_works{
    margin-top:20px;
    width:200px;
    height:200px;
    background-size:contain;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;utf8,<svg   xmlns:dc="http://purl.org/dc/elements/1.1/"   xmlns:cc="http://creativecommons.org/ns#"   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"   xmlns:svg="http://www.w3.org/2000/svg"   xmlns="http://www.w3.org/2000/svg"   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"   version="1.1"   width="556"   height="491"   id="svg2"   xml:space="preserve"   inkscape:version="0.48.2 r9819"   sodipodi:docname="UK_traffic_sign_7001.svg"><sodipodi:namedview     pagecolor="#ffffff"     bordercolor="#666666"     borderopacity="1"     objecttolerance="10"     gridtolerance="10"     guidetolerance="10"     inkscape:pageopacity="0"     inkscape:pageshadow="2"     inkscape:window-width="1024"     inkscape:window-height="706"     id="namedview8"     showgrid="false"     fit-margin-top="0"     fit-margin-left="0"     fit-margin-right="0"     fit-margin-bottom="0"     inkscape:zoom="0.39333333"     inkscape:cx="339.99877"     inkscape:cy="299.99999"     inkscape:window-x="-8"     inkscape:window-y="-8"     inkscape:window-maximized="1"     inkscape:current-layer="svg2" /><defs     id="defs16" /><metadata     id="metadata4"><rdf:RDF><cc:Work         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><path     d="m 519.92781,491 c 12.42314,-0.27441 24.42519,-6.85562 31.1483,-18.36935 6.64074,-11.61203 6.34505,-25.28828 0.43262,-36.306 L 309.45422,17.72081 C 303.06767,7.17875 291.36171,0.08489 278.08924,0 264.63075,0.0847...

JavaScript

var timeElement = document.getElementById('remaining');

function getRemainingTime(){
    var date = new Date((new Date('Apr 03, 2014 12:00:00')).getTime()-(new Date()).getTime());
    var hours = date.getHours().toString();
    var minutes = date.getMinutes().toString();
    var seconds = date.getSeconds().toString();
    function pad(value){
        if((typeof value) !== 'string'){
            return '00';
        }
        if(value.length === 1){
            return '0'+value;
        }
        return value;
    }
    if(!!timeElement){
        timeElement.innerHTML = pad(hours)+':'+pad(minutes)+':'+pad(seconds)
    }
}

getRemainingTime();
setInterval(getRemainingTime,1000);