JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<div class="countdown" data-end="1519302600"></div>
<div class="countdown" data-end="1519776000"></div>
JavaScript
function countdown(el, interval) {
const end = moment.unix(el.dataset.end);
const dur = moment.duration(end.diff(moment()));
let html = ''
if(dur.hours() > 0) {
const hours = Math.floor(dur.asHours(true));
html += hours + ' ' + plural(hours, 'hour') + ', ';
}
if(dur.minutes() > 0) {
html += dur.minutes() + ' ' + plural(dur.minutes(), 'minute') + ', ';
}
if(dur.seconds() > 0) {
html += dur.seconds() + ' ' + plural(dur.seconds(), 'second') + ', ';
}
html = html.slice(0, -2);
// already happend
if(dur <= 0) {
clearInterval(interval);
html = 'Now';
}
el.innerHTML = html;
}
function plural(n, word) {
return word + ((n === 1) ? '' : 's');
}
const elements = document.getElementsByClassName('countdown');
Array.prototype.forEach.call(elements, function (el) {
const interval = setInterval(function() {
countdown(el, interval);
}, 1000);
});