JSFiddle - React, Tailwind, and code Playground

HTML

<br /><br />
<div id="clock">
   <span class="it_is lightup">it is</span><span class="sec">:</span>&nbsp;<span class="half">half</span>&nbsp;<span class="10to 10past">ten</span><br/>
   <span class="quarter">quarter</span>&nbsp;&nbsp;<span class="20to 25to">twenty</span><br/>
   <span class="25to 5to">five</span>&nbsp;<span class="minutes">minutes</span>&nbsp;<span class="to">to</span><br/>
    <span class="past">past</span>&nbsp;&nbsp;<span class="1">one</span>&nbsp;<span class="3">three</span><br/>
   <span class="2">two</span>&nbsp;&nbsp;<span class="4">four</span>&nbsp;&nbsp;<span class="5">five</span><br/>
   <span class="6">six</span>&nbsp;<span class="7">seven</span>&nbsp;<span class="8">eight</span><br/>
   <span class="9">nine</span>&nbsp;<span class="10">ten</span>&nbsp;<span class="11">eleven</span><br/>
   <span class="12">twelve</span>&nbsp;&nbsp;<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:3px;
    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('.quarter');
    } else if (minutes == 45) {
        if (hours == 12) hours = 0;
        classes.push('.' + (hours + 1));
        classes.push('.quarter');
        classes.push('.to');
    } else if (minutes < 30) {
        classes.push('.' + hours);
        classes.push('.' + minutes + 'to');
        classes.push('.past');
        classes.push('.minutes');
    } else if (minutes > 30) {
        if (hours == 12) hours = 0;
        classes.push('.' + (hours + 1));
        classes.push('.' + (60 - minutes) + 'to');
        classes.push('.to');
        classes.push('.minutes');
    }

    render_time(classes);
}