JSFiddle - React, Tailwind, and code Playground

by somsekhardash

HTML

<div id="outclock">
			<div class="secondclass"><img class="second" src="http://www.paulrhayes.com/experiments/clock/images/secondHand.png"/></div>
			<div class="minuteclass"><img class="minute" src="http://www.paulrhayes.com/experiments/clock/images/minuteHand.png"/></div>
			<div class="hourclass"><img id="hour" src="http://www.paulrhayes.com/experiments/clock/images/hourHand.png" /></div>

CSS

#outclock{position: relative;background:url("http://www.handwritingforkids.com/handwrite/manuscript/clock/images/big-analog-clock.gif") no-repeat transparent; height: 409px; width: 414px;	}
.second{left: 14px; position: absolute; top: 14px;}
.minute{left: 17px; position: absolute; top: 14px;}
#hour{left: 16px; position: absolute; top: 11px;}	 	
.htime{margin: 0 0 10px 10px;}

JavaScript

$(document).ready(function(){
  		var now = new Date();
		var hr=now.getHours();
		var min=now.getMinutes();
		var sec=now.getSeconds();
		hr=hr%12;
		hr=hr*30;
$('#hour').animate({
    step: function(hr) {
		$(this).css('-webkit-transform','rotate('+hr+'deg)'); 
	},
	duration: 10
},'linear');
});