JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bg">
    <div id="pane">
        <div id="second"></div>
        <div id="big"></div>
        <div id="small"></div>
    </div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}
#second {
    display: none;
}
#bg{
    position: relative;
    margin: 24px auto;
    width: 458px;
    height: 520px;
    z-index: 1;
}
#bg:after{
    content: "";
    position: absolute;
    left: 231px;
    top: 220px;
    width: 22px;
    height: 18px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAJCAMAAADTuiYfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAARdQTFRFNzk4PkA/YmNbrqyoYWJbkpCOpaWgQEBAr6unMDEzNTUz+Pn5xsa+PDw4Nzc16urocnFtw8C/mpiWwsG96+vp+vr6/Pz88vLwOTs6Pzs2PT07OTkwwL664uLg08/Py8vJXl5diIaAt7ay9PTzOTk37+zqj4yILjAwhoWBNzcykpCNysjEk5SPSEpGP0E+Ojo4XF1VNTU0KCcmXV5UMjIwODg48/PzmJeSg4OCWVhYOjs4Ozw0ubi16erp4OHfoKCfaGpfS0tKWlxYtLCwOzs5vLu2PD47Tk9OISEi5OTj1tPRl5iRlJSP+fn5Njg4Ozw7UE9KgoF9w8PB/v796Ojon5+b7O3sPTw6NzY0xcTB+Pj49/f3////jt7BWgAAAF10Uk5T//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8A4a+dkAAAAG9JREFUeNpiiInRjpETFAqKiYlhiJHh4XC2NDJUiBFhiFEyd7XwYHfhcxRmiBQw8HHnZHBTMdFgiAlg0tHzY7TiCg9ksJF28NZV99eXitBiiFE0ZnGSMOWNCI9kiAEBNmtNSbUYCDsmhpU5JgYgwABxlxYENAixTQAAAABJRU5ErkJggg==) top left no-repeat;
    background-size: 100%;
    z-index: 100;
}
#pane{
    top: 40px;
    left: 48px;
    position: absolute;
    width: 380px;
    height: 380px;
    -webkit-transform-origin: 48% 48%;
    -webkit-transform: rotateY(35deg);
}
#small,
#big,
#second {
    position: absolute;
    left: 190px;
    top: 50px;
    width: 4px;
    height: 140px;
    background: rgba(0,0,0,.9);
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: rotate(-60deg);
    -webkit-filter: blur(1px);
}
#big,
#second {
    height: 210px;
    -webkit-transform-origin: 50% 66.33333%;
    -webkit-transform: rotate(60deg);
}
#second{
    width: 2px;
    background: red;
}

#bg{
background:...

JavaScript

window.requestAnimationFrame = 
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame;
var b = document.getElementById("big");
var s = document.getElementById("small");
var r = document.getElementById("second");

function step() {
  var progress;
  var nu = new Date();
  var mili = nu.getMilliseconds();
  var sec = nu.getSeconds();
  var min = nu.getMinutes();
  var hours = nu.getHours();
  if (hours > 11) {

      hours = Math.floor(hours-12);
  }
  b.style.transform = 'rotate('+(min + (sec / 60 ) + (mili / 60000)) * 6+'deg)';
  s.style.transform = 'rotate('+(hours + (min / 60) + (sec / 3600 ) + (mili / 6000000)) * 30 +'deg)';
  r.style.transform = 'rotate('+(sec * 6)+'deg)';

  b.style.webkitTransform = 'rotate('+(min + (sec / 60 ) + (mili / 60000)) * 6+'deg)';
  s.style.webkitTransform = 'rotate('+(hours + (min / 60) + (sec / 3600 ) + (mili / 6000000)) * 30 +'deg)';
   r.style.webkitTransform = 'rotate('+(sec * 6)+'deg)';
  requestAnimationFrame(step);
}

requestAnimationFrame(step);