JSFiddle - React, Tailwind, and code Playground

HTML

<br /><br />
<div id="clock">
   <span class="it_is lightup">it</span>l<span class="it_is lightup">is</span><span class="sec">:</span>stime<br/>
   <span class="aquarter">a</span>c<span class="aquarter">quarter</span>dc<br/>
   <span class="20to 25to">twenty</span><span class="25to 5to">five</span>x<br/>
   <span class="half">half</span>b<span class="10to 10past">ten</span>f<span class="to">to</span><br/>
   <span class="past">past</span>eru<span class="9">nine</span><br/>
   <span class="1">one</span><span class="6">six</span><span class="3">three</span><br/>
   <span class="4">four</span><span class="5">five</span><span class="2">two</span><br/>
   <span class="8">eight</span><span class="11">eleven</span><br/>
   <span class="7">seven</span><span class="12">twelve</span><br/>
   <span class="10">ten</span>s<span class="oclock">o'clock</span><br/>
</div>
<script type="text/javascript">
    $(document).ready(function () {
       setInterval(function(){check_time()}, 1000);
    });
</script>

CSS

body {
    background-color: #111;
}
div#clock {
    font-size: 50px;
    font-family: 'Droid Sans Mono', monospace;
    color: #222;
    letter-spacing: 18px;
    text-align: center;
}      
.lightup {
    color: #EEE;
}       
.seclightup {
    color: #EEE;
}       
.gumuz {
    color: #333;
}

JavaScript

function render_time(classes) {
    $('span').removeClass('lightup');
    for (var i in classes) {
        $(classes[i]).addClass('lightup');
    }
}

function toggle_sec() {
    if ($('.sec').hasClass('seclightup')) {
        $('.sec').removeClass('seclightup')
    } else {
        $('.sec').addClass('seclightup')
    }
}

function check_time() {
    var classes = ['.it_is']
    toggle_sec();
    var date = new Date();
    var hours = date.getHours() % 12;
    if (hours == 0) hours = 12;
    var minutes = date.getMinutes() - (date.getMinutes() % 5);
    if (date.getMinutes() % 5 > 2) minutes = minutes + 5;
    if (minutes == 60) {
        minutes = 0;
        hours = hours + 1;
    }

    // stupid switch logic...
    if (minutes == 0) {
        classes.push('.' + hours);
        classes.push('.oclock');
    } else if (minutes == 30) {
        classes.push('.' + hours);
        classes.push('.half');
        classes.push('.past');
    } else if (minutes == 15) {
        classes.push('.' + hours);
        classes.push('.past');
        classes.push('.aquarter');
    } else if (minutes == 45) {
        if (hours == 12) hours = 0;
        classes.push('.' + (hours + 1));
        classes.push('.aquarter');
        classes.push('.to');
    } else if (minutes < 30) {
        classes.push('.' + hours);
        classes.push('.' + minutes + 'to');
        classes.push('.past');
    } else if (minutes > 30) {
        if (hours == 12) hours = 0;
        classes.push('.' + (hours + 1));
        classes.push('.' + (60 - minutes) + 'to');
        classes.push('.to');
    }

    render_time(classes);
}