• HTML
• CSS
• JS

HTML

<div class="container">
    <div class="digital-clock">
        <div id="hour"></div>
        <div id="minutes"></div>
        <div id="seconds"></div>
        <div id="ampm"></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;
}

.container
{
    width:350px;
    height:350px;
    display:flex;
    justify-content:center;
    align-items:center;
    border:8px solid #fff;
    border-radius:50%;
}
.digital-clock
{
    display:flex;
    color:#fff;
    font-size:4em;
    padding:1em 0em;
    background:#040615;
}

JS

let hour    = document.querySelector("#hour");
let minutes = document.querySelector("#minutes");
let seconds = document.querySelector("#seconds");
let ampm    = document.querySelector("#ampm");

setInterval(()=>{
    
    let h = new Date().getHours();
    let m = new Date().getMinutes();
    let s = new Date().getSeconds();
    let am = "AM";
    
    if(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;
    
})