JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<section id="analog">
    <time data-bind="time: CurrentTime "/>
</section>
<section id="digital"></section>

CSS

#analog { 
    margin-bottom: 20px;
}

#digital time, #analog time {
    background: #fff;
    background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #e5e5e5 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
    background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#e5e5e5 100%);
    background: -o-radial-gradient(center, ellipse cover,  #ffffff 0%,#e5e5e5 100%);
    background: -ms-radial-gradient(center, ellipse cover,  #ffffff 0%,#e5e5e5 100%);
    background: radial-gradient(ellipse at center,  #ffffff 0%,#e5e5e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 );
    width: 200px; 
    border: 2px solid #888;
    margin: 5px;
    display:inline-block;
}

#digital time {
    text-align:center;
}

#analog time {
    height: 200px;
    border: 2px solid #888;
    border-radius: 50%;
    position: relative;
}

#analog time .radial{
    position: absolute;
}

#analog time .tick {
    left: 99.5px; /* half way, minus 1/2 the width */
    -webkit-transform-origin-y: 99.5px; 
    width: 1px; height: 10px;
    background: #888;  
}


#analog time .tick.bigtick{
    left: 99px; /* half way, minus 1/2 the width */
    -webkit-transform-origin-y: 99px; 
    width: 2px; height: 15px;   
    background: #444;  
}


#analog time .numeral{
    font-size: 18px;
    font-style: Georgia, 'Times New Roman', Serif;
    text-align:center;
    padding-top: 18px;
    -webkit-transform-origin-y: 100px;       
    left: 80px; /* half way, minus width */
    width: 40px;
}

#analog time .hand{
}

#analog time .hand.minute{
    left: 98px;
    width: 4px; 
    border-radius: 2px;
    height: 100px;
    top: 20px;    
    /*-webkit-transform-origin-x: 40%;*/
    -webkit-transform-origin-y: 80px; /* 80px past the pin, plus 2px for width */
    background: rgba(0, 0, 255, .5);
}
#analog time...

JavaScript

$('<time/>', { datetime: "06:45" }).appendTo('#analog,#digital');
$('<time/>', { datetime: "03:15" }).appendTo('#analog,#digital');
$('<time/>', { datetime: "12:00" }).appendTo('#analog,#digital');
$('<time/>', { datetime: "08:00" }).appendTo('#analog,#digital');
$('<time/>', { datetime: "03:00" }).appendTo('#analog,#digital');

ko.bindingHandlers.time = {
    update: function(element, valueAccessor) {
     var time = valueAccessor();
    $(element).attr('datetime', time());
        updateClock(element);
    }
}
    
var updateClock = function(element) {
    var datetime = $(element).attr('datetime').split(':');
    var hour = parseInt(datetime[0], 10);
    var minute = parseInt(datetime[1], 10);
   $(element).find('div.radial.hand').remove();
    $('<div/>', {
        "class": "radial hand hour",
        css: { transform: 'rotate(' + ((hour+minute/60)/12*360) + 'deg)'}
    }).appendTo(element);

    $('<div/>', {
        "class": "radial hand minute",
        css: { transform: 'rotate(' + (minute/60*360) + 'deg)'}
    }).appendTo(element);

    $('<div/>', {
        "class": 'pin'
    }).appendTo(element);
}

var ViewModel = function() {
  var self = this;
    self.CurrentTime = ko.observable("3:15")            
    self.UpdateTime = function() {
        var date = new Date();
        self.CurrentTime(date.getHours() % 12 + ":" + date.getSeconds());    
    }
}
        
        var viewModel = new ViewModel();
setInterval(viewModel.UpdateTime, 1); 

    
ko.applyBindings(viewModel); 

for(var i = 0; i < 60; ++i){
    $('<div/>', { 
        "class": "radial tick" + (i%5===0? " bigtick":""), 
        css: { transform: 'rotate(' + (6*i) + 'deg)'}
    }).appendTo('#analog time');
}

for(var i = 1; i <= 12; ++i){
    $('<div/>', { 
        "class": "radial numeral", 
        css: { transform: 'rotate(' + (i/12*360) + 'deg)'},
        text: i
    }).appendTo('#analog time');
}

$('#analog time').each(function(){
updateClock($(this));
    
});