JSFiddle - React, Tailwind, and code Playground

HTML

<section id="analog">
    <time datetime="10:10">10:10</time>
</section>

CSS

section{ 
    padding: 10px; 
    border: 1px solid #888; 
    margin: 10px;
}

#analog time {
    display: inline-block;
    height: 200px;
    width: 200px;
    border: 2px solid #888;
    border-radius: 50%; /* make it a circle */
    position: relative; /* req for tick positioning */
}

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

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

#analog time .numeral{
    position: absolute;
    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; /* make it big enough for the centering*/
}

#analog time .minute-hand{
    position: absolute;
    left: 98px;
    width: 4px; 
    border-radius: 2px;
    height: 100px;
    top: 20px;    
    -webkit-transform-origin-y: 80px; /* 80px past the pin, plus 2px for width */
    background: rgba(0, 0, 255, .5);
}
#analog time .hour-hand{
    position: absolute;
    left: 97px;
    width: 6px; 
    border-radius: 3px;
    height: 70px;
    top: 50px;
    -webkit-transform-origin-y: 50px;
    background: rgba(255, 0, 0, .5);
}

#analog time .pin {
    position:absolute;
    background-color: #fff;
    height: 12px;
    width: 12px;
    border: 1px solid #888;
    border-radius: 50%;
    left: 93px; /* half way, minus 1/2 width, minus half border  */
    top: 93px; /* half way, minus 1/2 width, minus half border  */
}

JavaScript

var $clock = $('#analog time').text(""); // hide the value;
// add tick marks
for (var i = 0; i < 60; ++i) {
    var tickClass = i % 5 === 0 ? "bigtick" : "tick";

    // 360°/60 ticks = 6°/tick
    var transformValue = 'rotate(' + (i * 360 / 60) + 'deg)';

    var tickMark = $('<div/>', {
        "class": tickClass,
        css: {
            transform: transformValue
        }
    });

    $clock.append(tickMark);
}

// add numerals
for (var i = 1; i <= 12; ++i) {
    // each hour is 1 twelfth of 360°
    var transformValue = 'rotate(' + (i / 12 * 360) + 'deg)'

    var numeral = $('<div/>', {
        "class": "numeral",
        css: {
            transform: transformValue
        },
        text: i
    });

    $clock.append(numeral);
}

// parse the time from the tag
var datetime = $clock.attr('datetime').split(':');
var hour = parseInt(datetime[0], 10);
var minute = parseInt(datetime[1], 10);

// add the hour hand
var hourHandTransformValue = 'rotate(' + (hour + minute / 60) / 12 * 360 + 'deg)'
var hourHand = $('<div/>', {
    "class": "hour-hand",
    css: {
        transform: hourHandTransformValue 
    }

});
$clock.append(hourHand);

// add the minute hand
var minuteHandTransformValue = 'rotate(' + (minute / 60 * 360) + 'deg)';
var minuteHand = $('<div/>', {
    "class": "minute-hand",
    css: {
        transform: minuteHandTransformValue
    }
});
$clock.append(minuteHand);

// add the pin in the middle
var pin = $('<div/>', { "class": 'pin' });
$clock.append(pin);