JSFiddle - React, Tailwind, and code Playground

by Alex Slepenkov

HTML

<article class="article-timer">
   <center>
       <div style="font-family:verdana; " id="timer"></div>
    </center>
</article>

CSS

dl { position:relative; height:80px; margin:20px auto 50px; width:810px; height:150px; background:green; font-size:1.5em; color:#000; }
dt { position:absolute; top:10px; left:0; width:135px; text-align:center; padding-top:15px; }
dd {  position:absolute; top:50px; left:0; font-size:2.2em; text-align:center; width:135px; }
dt#years_lbl, dd#years { left:0; }
dt#months_lbl, dd#months { left:135px; }
dd#days { left:270px; }
dd#hours { left:405px;  }
dt#mins_lbl, dd#minutes { left:540px; }
dt#secs_lbl, dd#seconds { left:675px; }
#dl * { text-outline: 1px 1px #000; }
dt#days_lbl {left:290px;}
dt#hrs_lbl {left:415px;}

JavaScript

$(document).ready(function() {
    $("#timer").countdown({
    since: new Date(2015, 8, 6, 00, 00, 00),
    format: "YODHMS",
    layout: '<dl><dt id="years_lbl">YEARS</dt><dd id="years">{ynn}</dd><dt id="months_lbl">MONTHS</dt><dd id="months">{onn}</dd><dt id="days_lbl">DAYS</dt><dd id="days">{dnn}</dd><dt id="hrs_lbl">HOURS</dt><dd id="hours">{hnn}</dd><dt id="mins_lbl">MINUTES</dt><dd id="minutes">{mnn}</dd><dt id="secs_lbl">SECONDS</dt><dd id="seconds">{snn}</dd></dl>'
    });
});