JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="clock">
    <li id="sec"></li>
    <li id="hour"></li>
    <li id="min"></li>
</ul>

CSS

* {
        	margin: 0;
        	padding: 0;
        }
        
        #clock {
        	position: relative;
        	width: 620px;
        	height: 620px;
        	margin: 20px auto 0 auto;
        	background: url(http://www.techmineral.com/clock/images/clockface.png);
        	list-style: none;
        	}
        
        #sec, #min, #hour {
        	position: absolute;
        	width: 39px;
        	height: 600px;
        	top: 0px;
        	left: 285px;
        	}
        
        #sec {
        	background: url(http://i.imgur.com/Hfc73Xy.png);
        	z-index: 3;
           	}
           
        #min {
        	background: url(http://www.techmineral.com/clock/images/minhand.png);
        	z-index: 2;
           	}
           
        #hour {
        	background: url(http://www.techmineral.com/clock/images/hourhand.png);
        	z-index: 1;
           	}
           	
        p {
            text-align: center; 
            padding: 10px 0 0 0;
            }

JavaScript

setInterval(function () {
    var seconds = new Date().getSeconds();
    var sdegree = seconds * 6;
    var srotate = "rotate(" + sdegree + "deg)";

    $("#sec").css({
        "-moz-transform": srotate,
        "-webkit-transform": srotate
    });

}, 1000);


setInterval(function () {
    var hours = new Date().getHours();
    var mins = new Date().getMinutes();
    var hdegree = hours * 30 + (mins / 2);
    var hrotate = "rotate(" + hdegree + "deg)";

    $("#hour").css({
        "-moz-transform": hrotate,
        "-webkit-transform": hrotate
    });

}, 1000);


setInterval(function () {
    var seconds = new Date().getSeconds();
    var mins = new Date().getMinutes();
    var mdegree = (mins * 6) - 6 + (seconds * 0.1);
    var mrotate = "rotate(" + mdegree + "deg)";

    $("#min").css({
        "-moz-transform": mrotate,
        "-webkit-transform": mrotate
    });

}, 1000);