JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.debug.js"></script>
<div class="dateTimer">
    <div class="tens">
        <div class="upperTensClock" data-bind="css: {
            'l1 l2 l3': tens() == 0,
            'l3': tens() == 1,
            'l2 l3 l7': tens() == 2 || tens() == 3,
            'l1 l3 l7': tens() == 4,
            'l1 l2 l7': tens() == 5 || tens() == 6,
            'l2 l3': tens() == 7,
            'l1 l2 l3 l7': tens() == 8 || tens() == 9 
            }"></div>
        <div class="lowerTensClock" data-bind="css: {
            'l4 l5 l6': tens() == 0 || tens() == 6 || tens() == 8,
            'l4': tens() == 1 || tens() == 4 || tens() == 7 || tens() == 9,
            'l5 l6': tens() == 2,
            'l4 l5': tens() == 3 || tens() == 5
            }"></div>
    </div>
    <div class="units">
        <div class="upperClock l1 l2 l3 l7" data-bind="css: {
            'l1 l2 l3': units() == 0,
            'l3': units() == 1,
            'l2 l3 l7': units() == 2 || units() == 3,
            'l1 l3 l7': units() == 4,
            'l1 l2 l7': units() == 5 || units() == 6,
            'l2 l3': units() == 7,
            'l1 l2 l3 l7': units() == 8 || units() == 9 
            }"></div>
        <div class="lowerClock l4 l5 l6" data-bind="css: {
            'l4 l5 l6': units() == 0 || units() == 6 || units() == 8,
            'l4': units() == 1 || units() == 4 || units() == 7 || units() == 9,
            'l5 l6': units() == 2,
            'l4 l5': units() == 3 || units() == 5
            }"></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

var timerViewModel = function () {

    var self = this;
    var startTime = 100;
    var units;
    var tens;
    self.units = ko.observable();
    self.tens = ko.observable();

    this.timerValue = setInterval(function () {
        --startTime;
        units = startTime % 10;
        tens = (startTime - units) / 10;
        self.units(units);
        self.tens(tens);
    }, 1000);

};

ko.applyBindings(new timerViewModel());