JSFiddle - React, Tailwind, and code Playground

by midesowunmi

HTML

<div id="clockBody">
           <div id="clockDial">
               <div id="hourHand"></div>
               <div id="minuteHand"></div>
           </div>
           <div id="pendulum"></div>
       </div>

CSS

@-webkit-keyframes minuteTick{
    from {-webkit-transform:rotate(0deg)}

    to { -webkit-transform:rotate(360deg)}
}

@-moz-keyframes minuteTick{
    from{ -moz-transform:rotate(0deg)}
    to{ -moz-transform:rotate(360deg)}
}

@-webkit-keyframes hourTick{
    from {-webkit-transform:rotate(0deg)}

    to { -webkit-transform:rotate(360deg)}
}

@-moz-keyframes hourTick{
    from{ -moz-transform:rotate(0deg)}
    to{ -moz-transform:rotate(360deg)}
}

@-webkit-keyframes swingTick{
    0% {-webkit-transform:rotate(15deg) }

    50% { -webkit-transform:rotate(-15deg) }
    100% { -webkit-transform:rotate(15deg)}
}

@-moz-keyframes swingTick{
    from{ -moz-transform:rotate(0deg)}
    to{ -moz-transform:rotate(360deg)}
}
#clockBody{
    width: 200px;
    height: 700px;
    border: 2px solid saddlebrown;
    background-color: sandybrown;
    padding-top: 50px;
}

#clockDial{
    width: 180px;
    height: 180px;
    border-radius: 90px;
    background-color: ivory;
    border: 1px solid orange;
    margin: 0 auto;
}

#hourHand{
    width: 8px;
    height: 40px;
    background-color: #222;
    position: absolute;
    left: 110px;
    top: 155px;
    -webkit-transform-origin: 4px 0px;
    -moz-transform-origin: 4px 0px;
    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-name: hourTick;
    -moz-animation-name: hourTick;
    -webkit-animation-duration: 600s;
    -moz-animation-duration: 600s;
}

#minuteHand{
    width: 5px;
    height: 60px;
    background-color: #222;
    position: absolute;
    left: 110px;
    top: 155px;
 -webkit-transform-origin: 2px 0px;
    -moz-transform-origin: 2px 0px;
    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-name: minuteTick;
   ...