JSFiddle - React, Tailwind, and code Playground

HTML

<table id="clock">
    <tr>
        <td>K</td>
        <td class="verbage">I</td>
        <td class="verbage">T</td>
        <td>R</td>
        <td class="verbage">I</td>
        <td class="verbage">S</td>
        <td>C</td>
        <td class="10to">T</td>
        <td class="10to">E</td>
        <td class="10to">N</td>
        <td class="half">H</td>
        <td class="half quarter">A</td>
        <td class="half">L</td>
        <td class="half">F</td>
        <td>X</td>
        <td>.</td>    
    </tr>

    <tr>
        <td class="quarter">Q</td>
        <td class="quarter">U</td>
        <td class="quarter">A</td>
        <td class="quarter">R</td>
        <td class="quarter">T</td>
        <td class="quarter">E</td>
        <td class="quarter">R</td>
        <td class="20to 25to">T</td>
        <td class="20to 25to">W</td>
        <td class="20to 25to">E</td>
        <td class="20to 25to">N</td>
        <td class="20to 25to">T</td>
        <td class="20to 25to">Y</td>
        <td>B</td>
        <td>Z</td>
        <td>:</td>    
    </tr>

    <tr>
        <td>I</td>
        <td class="25to 5to">F</td>
        <td class="25to 5to">I</td>
        <td class="25to 5to">V</td>
        <td class="25to 5to">E</td>
        <td>C</td>
        <td class="minutes">M</td>
        <td class="minutes">I</td>
        <td class="minutes">N</td>
        <td class="minutes">U</td>
        <td class="minutes">T</td>
        <td class="minutes">E</td>
        <td class="minutes">S</td>
        <td>A</td>
        <td>L</td>
        <td>.</td>    
    </tr>


    <tr>
        <td class="past">P</td>
        <td class="past">A</td>
        <td class="past">S</td>
        <td class="past to">T</td>
        <td class="to">O</td>
        <td>B</td>
        <td class="2">T</td>
        <td class="2">W</td>
        <td class="2 1">O</td>
        <td class="1">N</td>
        <td class="1 8">E</td>
        <td class="8">I</td>
        <td class="8">G</td>
        <td class="8">H</td>
     ...

CSS

html, body{
    height:100%;
    overflow:hidden;
    background:#000;
    color: #222;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight:100;
    cursor:default;
    font-size:24px;
    text-shadow:0 0 1px rgba(0, 0, 0, 0.01);
}
body{
    -webkit-transition: background 1s linear;  /* Saf3.2+, Chrome */
     -moz-transition: background 1s linear;  /* FF4+ */
      -ms-transition: background 1s linear;  /* IE10 */
       -o-transition: background 1s linear;  /* Opera 10.5+ */
          transition: background 1s linear;
}
body.white{
    background:#fefefe;
    color:#ccc;
}
::selection{
    color:inherit;
    background:transparent;
}
::-moz-selection{
    color:inherit;
    background:transparent;
}

#clock{
    width:500px;
    height:500px;
    text-align:center;
    text-transform:uppercase;
    opacity:0;
    
    position: relative;
    top: 50%;
    margin-top: -250px;
    left: 50%;
    margin-left: -250px;
}
#clock .active{
    color:#fff;
    text-shadow:0 0 20px white;
}
#clock td{
    -webkit-transition: color 1s linear;  /* Saf3.2+, Chrome */
     -moz-transition: color 1s linear;  /* FF4+ */
      -ms-transition: color 1s linear;  /* IE10 */
       -o-transition: color 1s linear;  /* Opera 10.5+ */
          transition: color 1s linear;
}
body.white #clock .active{
    color:#222;
}

JavaScript

function render_time(classes) {
    // reset
    $('#clock .active').removeClass('active');
    toggle_sec();
    for (var i in classes) {
        $(classes[i]).addClass('active');
    }
}

function toggle_sec() {
    var title = $('title').text();

    var date = new Date();
    var hours = date.getHours() % 12;
    if (hours == 0) hours = 12;
    var minutes = date.getMinutes();

    if (title.indexOf(':') >= 0) {
        $('title').text(hours + ' ' + minutes);
    } else {
        $('title').text(hours + ':' + minutes);
    }
}

function check_time() {
    var classes = ['.verbage']

    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) {
        // o'clock!
        classes.push('.' + hours);
        classes.push('.oclock');
    } else if (minutes == 30) {
        // half past
        classes.push('.' + hours);
        classes.push('.half');
        classes.push('.past');
    } else if (minutes == 15) {
        // quarter past
        classes.push('.' + hours);
        classes.push('.past');
        classes.push('.quarter');
    } else if (minutes == 45) {
        // quarter to
        if (hours == 12) hours = 0;
        classes.push('.' + (hours + 1));
        classes.push('.quarter');
        classes.push('.to');
    } else if (minutes < 30) {
        // X past
        classes.push('.' + hours);
        classes.push('.' + minutes + 'to');
        classes.push('.past');
        classes.push('.minutes');
    } else if (minutes > 30) {
        // X to
        if (hours == 12) hours = 0;
        classes.push('.' + (hours + 1));
        classes.push('.' + (60 - minutes) + 'to');
        classes.push('.to');
        classes.push('.minutes');
    }

   ...