JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.0/moment.min.js"></script>
<div id="clock">
    <div id="hour">
        <div class="hclock"></div>
    </div>
      <div id="min">
        <div class="mclock"></div>
    </div>
    <div id='sec'>
      <div class='sclock'></div>
    </div>
  <div id='kr'></div>
</div>

CSS

body {
  background:#575757;
}  
#clock {
        position:absolute;
        width: 350px;
        height: 350px;
        border: 6px solid #222222;
        border-radius: 350px;
        background-color: #404040;
        margin-left:50%;
        left:-176px;
        top:100px;
         
    }
    #sec {
        width: 10px;
        height: 350px;
        position: absolute;
        left: 170px;
    }
    #min {
        width: 10px;
        height: 350px;
        position: absolute;
        left: 170px;
    }
    #hour {
        width: 10px;
        height: 350px;
        position: absolute;
        left: 170px;
    }
    .sclock {
        width: 2px;
        margin-top:5px;
        height: 170px;
        background-color: #c43643;
        margin-left: 4px;
        border-radius:2px;
    }
    .mclock {
        width: 6px;
        height: 145px;
        background-color: #222222;
        margin-left: 2px;
        margin-top:30px;
        border-radius:6px;
         }
    .hclock {
        width: 10px;
        height: 100px;
        background-color: #222222;
        margin-top:75px;
        border-radius:10px;
    }
#kr {
  width:20px;
  height:20px;
  position:absolute;
  border-radius:20px;
  background: #222222;
  margin-left:50%;
  left:-10px;
  top:165px;
}

JavaScript

var clock = function () {
    var x= new Date().getSeconds();
    var z= new Date().getMinutes();
    var y= new Date().getHours();
    var xx=x*6;
    var zz=z*6;
    var yy=y*30;
    var seconds = 'rotate(' + xx + 'deg)',
        minutes = 'rotate(' + zz + 'deg)',
        hours = 'rotate(' + yy + 'deg)';
    $('#sec').css({'transform': seconds});
    $('#min').css({'transform': minutes});
    $('#hour').css({'transform':hours});
    }; 
    clock();
    setInterval(clock, 1000);