JSFiddle - React, Tailwind, and code Playground

by Kai

HTML

<span rel="clock">Seoul 6:00 PM</span>
<span rel="clock">Montreal 5:00 PM</span>
<span rel="clock">New York 4:00 PM</span>
<span rel="clock">California 3:00 PM</span>
<span rel="clock">Nevada 2:00 PM</span>

CSS

span[rel="clock"] {
    display: block;
}

.colon {
    font-weight: bold;
}

JavaScript

$('span[rel="clock"]').each(function () {
    var $this = $(this),
        newElem = $this.html().replace(':', '<span class="colon">:</span>');
   $this.html(newElem);
});




setInterval(function () {
    $('span[class="colon"]').fadeOut().fadeIn();
}, 1100);