JSFiddle - React, Tailwind, and code Playground

by mhmk

HTML

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700">

</head>
<body>

	<div class="container">

		<div class="app">

			<div class="clock">

				<div class="clock-inner">

					<div class="clock-center"></div>
					<div id="clock-seconds"></div>
					<div id="clock-minutes"></div>
					<div id="clock-hours"></div>

					<ul class="clock-numbers">

						<li>12</li>
						<li>3</li>
						<li>6</li>
						<li>9</li>

					</ul>

				</div> <!-- end clock-inner -->

			</div> <!-- end clock -->

			<p class="app-title">Clock</p>

		</div> <!-- end app -->

	</div> <!-- end container -->
	
</body>
</html>

CSS

body {
	background: #282e3a;
	color: #f9f9f9;
	font: 100%/1.5em "Droid Sans", sans-serif;
	margin: 0;
}

p { margin: 0; }

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------- GENERAL-CLASSES ---------- */

.container {
	height: 228px;
	left: 50%;
	margin: -124px 0 0 -100px;
	position: absolute;
	top: 50%;
	width: 200px;
}

/* ---------- APP ---------- */

.app {
	text-align: center;
}

.app-title {
	font-size: 24px;
	font-weight: bold;
	text-shadow: 0 5px #15181f;
}

.clock {
	background: #1a1d24;
	border-radius: 35px;
	-webkit-box-shadow: 0 8px 0 #15181f;
	box-shadow: 0 8px 0 #15181f;
	height: 200px;
	margin-bottom: 24px;
	position: relative;
	width: 200px;
}

.clock-inner {
	background: #f9f9f9;
	border-radius: 50%;
	height: 160px;
	left: 50%;
	margin: -80px 0 0 -80px;
	position: absolute;
	top: 50%;
	width: 160px;
}

.clock-center,
#clock-seconds,
#clock-minutes,
#clock-hours {
	left: 50%;
	position: absolute;
	top: 50%;
}

.clock-center {
	background: #1a1d24;
	border-radius: 50%;
	height: 12px;
	margin: -6px 0 0 -6px;
	width: 12px;
	z-index: 4;
}

#clock-seconds {
	background: #c40206;
	border-radius: 2px;
	height: 60px;
	margin: -60px 0 0 -1px;
	-webkit-transform-origin: 1px 60px;
	-moz-transform-origin: 1px 60px;
	-ms-transform-origin: 1px 60px;
	-o-transform-origin: 1px 60px;
	transform-origin: 1px 60px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	width: 2px;
  z-index: 3;
}

#clock-minutes {
	background: #aaa;
	border-radius: 4px;
	height: 50px;
	margin: -50px 0 0 -2px;
	-webkit-transform-origin: 2px 50px;
	-moz-transform-origin: 2px 50px;
	-ms-transform-origin: 2px 50px;
	-o-transform-origin: 2px 50px;
	transform-origin: 2px 50px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	width: 4px;
  z-index: 2;
}

#clock-hours {
	background:...

JavaScript

(function() {

	var clockSeconds = document.getElementById('clock-seconds'),
	clockMinutes = document.getElementById('clock-minutes'),
	clockHours = document.getElementById('clock-hours');

	function getTime() {

		var date = new Date(),
		seconds = date.getSeconds(),
		minutes = date.getMinutes(),
		hours = date.getHours(),

		degSeconds = seconds * 360 / 60,
		degMinutes = (minutes + seconds / 60) * 360 / 60,
		degHours = (hours + minutes / 60 + seconds / 60 / 60) * 360 / 12;

		clockSeconds.setAttribute('style', '-webkit-transform: rotate(' + degSeconds + 'deg); -moz-transform: rotate(' + degSeconds + 'deg); -ms-transform: rotate(' + degSeconds + 'deg); -o-transform: rotate(' + degSeconds + 'deg); transform: rotate(' + degSeconds + 'deg);');
		clockMinutes.setAttribute('style', '-webkit-transform: rotate(' + degMinutes + 'deg); -moz-transform: rotate(' + degMinutes + 'deg); -ms-transform: rotate(' + degMinutes + 'deg); -o-transform: rotate(' + degMinutes + 'deg); transform: rotate(' + degMinutes + 'deg);');
		clockHours.setAttribute('style', '-webkit-transform: rotate(' + degHours + 'deg); -moz-transform: rotate(' + degHours + 'deg); -ms-transform: rotate(' + degHours + 'deg); -o-transform: rotate(' + degHours + 'deg); transform: rotate(' + degHours + 'deg);');
	}

	setInterval(getTime, 1000);
	getTime();

} ());