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;  
}

JavaScript

// add tick marks
var $clock = $('#analog time')
                .text(""); // hide the value;

for(var i = 0; i < 60; ++i){
    var tickClass = i % 5 === 0 ? "bigtick" : "tick";
    
    // 360°/60 ticks = 6°/tick
    var transformValue = 'rotate(' + (6 * i) + 'deg)' ;
    
    var tickMark = $('<div/>', { 
        "class": tickClass, 
        css: { transform: transformValue }
    });
    
    $clock.append(tickMark);
}