• 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>

<div id="digitalClock">
    <div id="hour"></div>
    <div id="minutes"></div>
    <div id="seconds"></div>
    <div id="ampm"></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;
}
#digitalClock
{
    display:flex;
    color:#fff;
    font-size:4em;
    margin-top:20px;
}

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)`;
    
    let hour = document.querySelector("#hour");
    let minutes = document.querySelector("#minutes");
    let seconds = document.querySelector("#seconds");
    let ampm = document.querySelector("#ampm");
    
    let h = new Date().getHours();
    let m = new Date().getMinutes();
    let s = new Date().getSeconds();
    let am = "AM";
    
    if(h > 12){
        h = h - 12;
        am = "PM";
    }
    
    //add zero before single digit Numbers
    h = (h < 10) ? "0" + h : h
    m = (m < 10) ? "0" + m : m
    s = (s < 10) ? "0" + s : s
    
    hour.innerHTML = h+":";
    minutes.innerHTML = m+":";
    seconds.innerHTML = s+"&nbsp";
    ampm.innerHTML = am;
})

/*
 All the credits: https://www.youtube.com/watch?v=s9mGaRSRGZw
*/