• HTML
• CSS
• JS

HTML

<div class="clock">
    <div class="hour">
        <div class="hr" id="hr"></div>
    </div>
    <div class="min">
        <div class="mn" id="mn"></div>
    </div>
    <div class="sec">
        <div class="sc" id="sc"></div>
    </div>
</div>

CSS

*
{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:consolas;
}
body
{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    min-height:100vh;
    background:#040615;
}
.clock
{
    width:350px;
    height:350px;
    display:flex;
    justify-content:center;
    align-items:center;
    border:8px solid #fff;
    border-radius:50%;
}
.clock::before
{
    content:'';
    position:absolute;
    width:15px;
    height:15px;
    background:#2196f3;
    z-index:10000;
    border-radius:50%;
}
.hour,
.min,
.sec
{
    position:absolute;
}
.hour,.hr
{
    width:200px;
    height:200px;
}
.min,.mn
{
    width:230px;
    height:230px;
}
.sec,.sc
{
    width:250px;
    height:250px;
}
.hr,.mn,.sc
{
    display:flex;
    justify-content:center;
    position:absolute;
}
.hr::before
{
    content:'';
    position:absolute;
    width:8px;
    height:100px;
    background:#fff;
}
.mn::before
{
    content:'';
    position:absolute;
    width:4px;
    height:110px;
    background:#fff;
}
.sc::before
{
    content:'';
    position:absolute;
    width:2px;
    height:120px;
    background:#2196f3;
}

JS

const hr = document.querySelector("#hr");
const mn = document.querySelector("#mn");
const sc = document.querySelector("#sc");

setInterval(()=>{
    
    let day = new Date();
    let hh = day.getHours()*30;
    let mm = day.getMinutes()*6;
    let ss = day.getSeconds()*6;
    
    hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`;
    mn.style.transform = `rotateZ(${mm}deg)}`;
    sc.style.transform = `rotatez(${ss}deg)`;
    
})