JSFiddle - React, Tailwind, and code Playground

by AndreaLigios

HTML

<div id="watch"><div class="digit"><span>1</span></div><div class="digit"><span>2</span></div><div class="digit"><span>3</span></div><div class="digit"><span>4</span></div><div class="digit"><span>5</span></div><div class="digit"><span>6</span></div><div class="digit"><span>7</span></div><div class="digit"><span>8</span></div><div class="digit"><span>9</span></div><div class="digit"><span>10</span></div><div class="digit"><span>11</span></div><div class="digit"><span>12</span></div><div id="mickey"></div><div class="left" id="hours"></div><div class="right" id="minutes"></div></div>

CSS

body {
  background: #000;
}

#watch {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 50%;
  width: 450px;
  height: 450px;
  background: -webkit-radial-gradient(#808080, #000000 70%);
  background: radial-gradient(#808080, #000000 70%);
  color: #fff;
  font: bold 30px Arial, sans-serif;
}

.digit {
  position: absolute;
  width: 104%;
  height: 104%;
  margin: -2%;
  text-align: center;
}
.digit span {
  display: block;
}

.digit:nth-child(1) {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}
.digit:nth-child(1) span {
  -webkit-transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
          transform: rotate(-30deg);
}

.digit:nth-child(2) {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg);
}
.digit:nth-child(2) span {
  -webkit-transform: rotate(-60deg);
      -ms-transform: rotate(-60deg);
          transform: rotate(-60deg);
}

.digit:nth-child(3) {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.digit:nth-child(3) span {
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.digit:nth-child(4) {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg);
}
.digit:nth-child(4) span {
  -webkit-transform: rotate(-120deg);
      -ms-transform: rotate(-120deg);
          transform: rotate(-120deg);
}

.digit:nth-child(5) {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg);
}
.digit:nth-child(5) span {
  -webkit-transform: rotate(-150deg);
      -ms-transform: rotate(-150deg);
          transform: rotate(-150deg);
}

.digit:nth-child(6) {
  -webkit-transform:...

JavaScript

var $hours = document.getElementById('hours');
var $minutes = document.getElementById('minutes');

setTimeout(function () {
  "use strict";

  var hours = new Date().getHours();
  var minutes = new Date().getMinutes();

  if (hours >= 6 && hours < 12) {
    $hours.className = 'left';
  } else {
    $hours.className = 'right';
  }

  if (minutes <= 30) {
    $minutes.className = 'back left';
  } else {
    $minutes.className = 'left';
  }

  set($hours,  30 * hours);
  set($minutes, 6 * minutes);
}, 1000);

function set ($elmt, deg) {
  "use strict";

  if ($elmt.id === 'hours' && deg < 180) {
    deg = deg - 5;
  }

  if ($elmt.id === 'minutes' && deg < 180) {
    deg = deg + 5;
  } else {
    deg = deg - 5;
  }

  $elmt.style.transform = 'rotate(' + deg + 'deg)';
  $elmt.style.webkitTransform = 'rotate(' + deg + 'deg)';
}