JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.debug.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<div class="dateTimer" data-bind="timer: startTime, timerOptions: {speed: 1000}">
    <div class="tens">
        <div class="upperTensClock timerLine"></div>
        <div class="lowerTensClock timerLine"></div>
    </div>
    <div class="units">
        <div class="upperClock timerLine"></div>
        <div class="lowerClock timerLine"></div>
    </div>
</div>

CSS

/*timer css*/
 .dateTimer {
    width: 125px;
}
.timerLine {
    margin: 2px;
    color: black;
}
.upperClock, .lowerClock {
    width: 50px;
    height: 50px;
    border-color: black;
    border-radius:6px;
}
.upperTensClock, .lowerTensClock {
    width: 50px;
    height: 50px;
    border-color: black;
    border-radius:6px;
}
.tens, .units {
    display: inline-block;
    width: auto;
}
.units {
    float: right;
}
.lowerClock {
    margin-top: -2px;
}
.lowerTensClock {
    margin-top: -2px;
}
.l1, .l6 {
    border-left-width: 4px;
    border-left-style: ridge;
}
.l2 {
    border-top-width: 4px;
    border-top-style: ridge;
}
.l3, .l4 {
    border-right-width: 4px;
    border-right-style: ridge;
}
.l7, .l5 {
    border-bottom-width: 4px;
    border-bottom-style: ridge;
}

JavaScript

ko.bindingHandlers.timer = {
    update: function (element, valueAccessor, allBindingAccessor) {
        var sec = ko.utils.unwrapObservable(valueAccessor());
        var options = allBindingAccessor().timerOptions || {
            speed: 1000
        };

        var timerValue = setInterval(function () {
            --sec;
            var units = sec % 10;
            var tens = (sec - units) / 10;

            $(element).find('.upperClock, .upperTensClock').addClass('l1 l2 l3 l7');
            $(element).find('.lowerClock, .lowerTensClock').addClass('l4 l5 l6');



            switch (units) {
                case 0:
                    $(element).find('.upperClock').removeClass('l7');
                    break;
                case 1:
                    $(element).find('.upperClock').removeClass('l1 l2 l7');
                    $(element).find('.lowerClock').removeClass('l6 l5');
                    break;
                case 2:
                    $(element).find('.upperClock').removeClass('l1');
                    $(element).find('.lowerClock').removeClass('l4');
                    break;
                case 3:
                    $(element).find('.upperClock').removeClass('l1');
                    $(element).find('.lowerClock').removeClass('l6');
                    break;
                case 4:
                    $(element).find('.upperClock').removeClass('l2');
                    $(element).find('.lowerClock').removeClass('l5 l6');
                    break;
                case 5:
                    $(element).find('.upperClock').removeClass('l3');
                    $(element).find('.lowerClock').removeClass('l6');
                    break;
                case 6:
                    $(element).find('.upperClock').removeClass('l3');
                    break;
                case 7:
                    $(element).find('.upperClock').removeClass('l1 l7');
                    $(element).find('.lowerClock').removeClass('l5 l6');
               ...