<div class="outer">
  <div class="inner">
    <div class="marking marking-one"></div>
  <div class="marking marking-two"></div>
  <div class="marking marking-three"></div>
  <div class="marking marking-four"></div>
    <div class="innermost"></div>
    <div class="hand hour-hand"></div>
    <div class="hand min-hand"></div>
    <div class="hand second-hand"></div>
    <div class="center"></div>
  </div>
</div>
body {
       background: linear-gradient(36deg, red, yellow, transparent);
    height: 98vh;
}

.outer{
  box-shadow: 1px 6px 6px 1px;
    width: 500px;
    height: 500px;
    display: flex;
    margin: auto;
  border-radius: 50%;
 
}
.inner{
  display: flex;
}
.inner,.inner .marking{
  
  position: relative;
  background: #282828;
 width: 100%;
  height: 100%;
  border-radius: 100%;
  
}
.inner::after{
  transform: rotate(90deg);
}

.inner::after,
.inner::before,
.inner .marking{
  content: '';
  position: absolute;
  width: 5px;
  height: 99%;
  background: #1df52f;
  z-index: 0;
  left: 49%;
}
.inner .marking-one{
  transform: rotate(30deg);
}
.inner .marking-two{
  transform: rotate(60deg);
}
.inner .marking-three{
  transform: rotate(120deg);
}
.inner .marking-four{
  transform: rotate(150deg);
}
.marking{
  background: #bdbdcb !important;
}
.innermost{
  width: 80%;
  height: 80%;
  margin: auto;
  background: #282828;
  z-index: 2;
  border-radius: 50%;
}
.innermost::before{
  position: absolute;
  content: '';
  background: red;
  border-radius: 50%;
  border: 1px solid red;
  width: 2.5%;
  height: 2.5%;
  top: 50%;
  left: 48%;
  z-index: 11;
}
.hand{
  width: 5px;
  height: 249px;
  position: absolute;
  left: 49%;
  z-index:50;
  border-radius: 6px;
  transform-origin: bottom;
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.hand.second-hand{
  top: 1%;
  background: pink !important;
    height: 249px;
    z-index: 48;
  
}
.hand.min-hand {
    width: 7px !important;
    z-index: 48;
    background: blue;
    height: 170px;
    top: 18%;
  left: 49%;
}
.hand.hour-hand {
    width: 8px !important;
    z-index: 48;
    background: yellow;
    height: 200px;
    top: 10%;
  left: 49%;
}

.center{
      border: 1px solid black;
    background: black;
    margin: auto;
    position: absolute;
    z-index: 99;
    width: 30px;
    height: 30px;
    left: 46%;
    top: 48%;
    border-radius: 50%;
}
/*
* https://frontendeval.com/questions/analog-clock
*
* Create an analog clock with hour, minute, and second hands. Each of the hands should be accurate to the browser's local timezone and update once per second.
*/
const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');

function getTime(){
  var today = new Date();
  return today;
}

let interval = setInterval(()=>{
  let time = getTime();
  let seconds = time.getSeconds()
  let secondsAngle = ((seconds/60)*360)+90;
  secondHand.style.transform = 'rotate('+secondsAngle+'deg)';
  let minutes = time.getMinutes();
  let minutesAngle = ((minutes/60)*360);
  minsHand.style.transform = 'rotate('+minutesAngle+'deg)';
  let hour = time.getHours();
  let hoursAngle = ((hour/12)*360);
  hourHand.style.transform = 'rotate('+hoursAngle+'deg)';
},1000);
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.