JSFiddle - React, Tailwind, and code Playground

HTML

<div class="face">
    <div class="hours"></div>
    <div class="minutes"></div>
    <div class="seconds"></div>
    <div class="dot"></div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}

html {
    overflow: hidden;
    background-color: #fff;
    width: 100%;
    height: 100%;
}

body {
    opacity: 1;
}

.face {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-top: -210px;
    margin-left: -210px;
    border-radius: 300px;
    border: 10px solid rgba(0,0,0,1);
}

.face ul {
    list-style: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

.face ul li {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -175px;
    height: 20px;
    width: 10px;
    border-radius: 10px;
    background-color: rgba(0,0,0,1);
    margin-left: -5px;
    -webkit-transform-origin: center 175px;
    transform-origin: center 175px;
}

.face ul li:nth-of-type(2){
    -webkit-transform: rotate( 90deg );
    -moz-transform: rotate( 90deg );
    -ms-transform: rotate( 90deg );
    -o-transform: rotate( 90deg );
    transform: rotate( 90deg );
}

.face ul li:nth-of-type(3){
    -webkit-transform: rotate( 180deg );
    -moz-transform: rotate( 180deg );
    -ms-transform: rotate( 180deg );
    -o-transform: rotate( 180deg );
    transform: rotate( 180deg );
}

.face ul li:nth-of-type(4){
    -webkit-transform: rotate( 270deg );
    -moz-transform: rotate( 270deg );
    -ms-transform: rotate( 270deg );
    -o-transform: rotate( 270deg );
    transform: rotate( 270deg );
}

.hours , .minutes , .seconds {
    position: absolute;
    width: 10px;
    border-radius: 10px;
    background-color: rgba(0,0,0,1);
    margin-left: -6px;
    top: 50%;
    left: 50%;
}

.seconds {
    background-color: rgba(255,80,85,1);
}

.dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: rgba(0,0,0,1);
    border-radius: 10px;
    border: 4px solid #fff;
    margin-top: -10px;
    margin-left: -10px;
    z-index: 12;
}

.hours {
    height: 120px;
    margin-top: -120px;
    box-shadow: 0px...

JavaScript

var time = new Date(),
hours , minutes , seconds;

hours = time.getHours();
if ( hours > 12 ){ hours -= 12 };

minutes = time.getMinutes();
seconds = time.getSeconds();

minutes = minutes * 60 + seconds;
hours = hours * 60 * 60 + minutes;

console.log( hours );

document.getElementsByClassName("seconds")[0].style.webkitAnimationDelay = document.getElementsByClassName("seconds")[0].style.mozAnimationDelay = document.getElementsByClassName("seconds")[0].style.msAnimationDelay = document.getElementsByClassName("seconds")[0].style.animationDelay = -seconds + "s";
document.getElementsByClassName("minutes")[0].style.webkitAnimationDelay = document.getElementsByClassName("minutes")[0].style.mozAnimationDelay = document.getElementsByClassName("minutes")[0].style.msAnimationDelay = document.getElementsByClassName("minutes")[0].style.animationDelay = -minutes + "s";
document.getElementsByClassName("hours")[0].style.webkitAnimationDelay = document.getElementsByClassName("hours")[0].style.mozAnimationDelay = document.getElementsByClassName("hours")[0].style.msAnimationDelay = document.getElementsByClassName("hours")[0].style.animationDelay = -hours + "s";