JSFiddle - React, Tailwind, and code Playground

by hhh hhh

CSS

.clock-bg {
  background: #FCCA66;
  width: 300px;
  height: 300px;
  border-radius: 100%;
  position: relative;
}
.circle {
  display: block;
  background: #48B382;
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: #000;
  border-radius: 100%;
  /*top: 10px;
  left: 43%;*/
  text-align: center;
  font-size: 18px;
  
}
.arrow-hour, .arrow-min, .arrow-sec {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 5px;
  background: #2B2A29;
  transform: rotate(0deg);
  transform-origin: 0;
}
.arrow-hour {
  width: 69px;
  height: 10px;
  transform: rotate(-15deg);
}
.arrow-min {
  width: 120px;
  height: 7px;
  transform: rotate(90deg);
}
.arrow-sec {
  width: 135px;
  height: 2px;
  transform: rotate(60deg);
}

JavaScript

window.onload = function () 
{

var wrapClock = document.createElement('div');
document.body.appendChild(wrapClock);
wrapClock.className = wrapClock.className + "clock-bg";

//var circlesClock = document.createElement('span');
//circlesClock.className = circlesClock.className + "circle";
//wrapClock.appendChild(circlesClock);

var arrowHour = document.createElement('span');
arrowHour.className = arrowHour.className + "arrow-hour";
wrapClock.appendChild(arrowHour);

var arrowMin = document.createElement('span');
arrowMin.className = arrowMin.className + "arrow-min";
wrapClock.appendChild(arrowMin);

var arrowSec = document.createElement('span');
arrowSec.className = arrowSec.className + "arrow-sec";
wrapClock.appendChild(arrowSec);

for (i=1; i<=12; i++) {
 var circlesClock = document.createElement('span');
 circlesClock.className = circlesClock.className + "circle";
 circlesClock.innerHTML = i;
 wrapClock.appendChild(circlesClock);
 
 
}

}