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*/
}

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)'
    $('<div/>', { 
        "class": "numeral", 
        css: { transform: transformValue},
        text: i
    }).appendTo('#analog time');
}