JSFiddle - React, Tailwind, and code Playground

HTML

<clock-face>
  <hour-hand></hour-hand>
  <minute-hand></minute-hand>
  <second-hand></second-hand>
</clock-face>

CSS

clock-face, clock-face::after, hour-hand, minute-hand, second-hand {
  display: block;
  transform-origin: 50% 100%;
  position: absolute;
  border-radius: 200px;
}

hour-hand, minute-hand, second-hand {
  animation: linear infinite rotate;
  background: black;
  height: 90px;
  top: 10px;
}

clock-face {
  width: 200px;
  height: 200px;
  border: 10px solid black;
}

clock-face::after {
  content: "";
  width: 20px;
  height: 20px;
  background: black;
  top: 90px;
  left: 90px;
}

hour-hand {
  width: 15px;
  height: 60px;
  top: 40px;
  left: 92.5px;
  animation-duration: 43200s;
}

minute-hand {
  width: 10px;
  left: 95px;
  animation-duration: 3600s;
}

second-hand {
  background: red;
  width: 5px;
  left: 97.5px;
  animation-duration: 60s;
}

@keyframes rotate {
  from { rotate: 0; }
  to { rotate: 360deg; }
}

JavaScript

document.querySelector("second-hand").style.animationDelay = `-${(new Date().getSeconds())}s`;
document.querySelector("minute-hand").style.animationDelay = `-${(new Date().getMinutes()) * 60}s`;
document.querySelector("hour-hand").style.animationDelay = `-${(new Date().getHours() % 12) * 3600}s`;