JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<div class="clock">
  <span class="time time-top">12</span>
  <span class="time time-right">3</span>
  <span class="time time-bottom">6</span>
  <span class="time time-left">9</span>
  
  <div class="hand hand-hours"></div>
  <div class="hand hand-minutes"></div>
  <div class="hand hand-seconds"></div>
</div>

CSS

html, body {
  height: 100%;
}
body {
  margin: 0;
  display: flex;
}
/*Часы
==============================*/
.clock {
  position: relative;
  width: 300px;
  height: 300px;
  margin: auto;
  /*Делаем часы круглыми*/
  border-radius: 50%;
  border: 7px solid #7B7E6B;
  background-color: #fdfdfd;
  box-shadow: 0 8px 20px #747474;
}

/*Цифры
==============================*/
.time {
  position: absolute;
  margin: auto;
  width: 40px;
  height: 40px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font: 600 2em Arial, sans-serif;
  text-align: center;
  color: #414141;
  text-shadow: 0 1px 3px #B8B9B9;
}
/*Распределяем цифры по своим местам*/
.time-top {
  bottom: auto;
}
.time-right {
  left: auto;
}
.time-bottom {
  top: auto;
}
.time-left {
  right: auto;
}
/*Стрелки
==============================*/
.hand {
  position: absolute;
  border-radius: 5px;
  left: 50%;
  bottom: 50%;
  background-color: #616161;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
/*Часовая стредка проходит целый круг за 2160 секунд (72 минуты)*/
.hand-hours {
  width: 8px;
  height: 16%;
  margin-left: -4px;
  -webkit-animation: move-hand 4320s infinite linear;
  animation: move-hand 4320s infinite linear;
}
/*Минутная стрелка проходит целый круг за 360 секунд (6 минут)*/
.hand-minutes {
  width: 4px;
  height: 25%;
  margin-left: -2px;
  -webkit-animation: move-hand 360s infinite linear;
  animation: move-hand 360s infinite linear;
}
/*Секундная стрелка проходит весь круг за 6 секунд*/
.hand-seconds {
  width: 2px;
  height: 39%;
  margin-left: -1px;
  background-color: #E22529;
  -webkit-animation: move-hand 6s infinite linear;
  animation: move-hand 6s infinite linear;
}
/*Устанавливаем анимацию, чтобы к концу анимации стрелка прошла 360 градусов (целый круг)*/
@-webkit-keyframes move-hand {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes move-hand {
  100% {
    -webkit-transform: rotate(360deg);
    transform:...