<div class="clock">
  <div class="button"></div>
  <div class="hourHand"></div>
  <div class="minuteHand"></div>
  <div class="secondHand"></div>
  
</div>

*{
  margin:0;
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&family=Poppins:wght@200&family=Roboto:wght@300;700&display=swap');

body{
  background: #8bc9ca;
  width:100%;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.clock{
  width:25vw;
  height:25vw;
  border-radius:50%;
  background:#2b5367;
  position:relative;
  box-shadow: -1.5vw 1.5vw #6ea2a0;
  display:flex; justify-content:center;
  align-items:center;
}

.clock::before{
  content:'';
  background:#fff;
  width:22vw; height:22vw;
  position:absolute;
  border-radius:50%;
  top:1.5vw;
  left:1.5vw;
  box-shadow:inset -.8vw .8vw #cccccb;
}

.clock::after{
  content:'clock';
  text-transform:uppercase;
  font-size:1.5vw;
  font-family:'Poppins';
  top:7vw;
  position:absolute;
  color:#cccccd;
  z-index:1;
}

.button{
  width:1.5vw; height:1.5vw;
  background:#fff;
  border:.4vw solid #2c5267;
  border-radius:50%;
  z-index:3;
}

.hourHand, .minuteHand, .secondHand{
  position:absolute;
  z-index:2;
  border-radius:1vw;
}

.hourHand{
  width: 8.5vw;
  height: .8vw;
  top:calc(50% - .4vw);
  left:calc(50% - 6.5vw);
  background:#2c5267;
  transform-origin:6.5vw;
}

.minuteHand{
  width: 10.5vw;
  height: .4vw;
  top:calc(50% - .2vw);
  left:calc(50% - 8.5vw);
  background:#2c5267;
  transform-origin:8.5vw;
  
}

.secondHand{
  width: 9.5vw;
  height: .2vw;
  top:calc(50% - .1vw);
  left:calc(50% - 7.5vw);
  background:#ee9140;
  transform-origin:7.5vw;

}

const hourHand = document.querySelector('.hourHand');
const minuteHand = document.querySelector('.minuteHand');
const secondHand = document.querySelector('.secondHand');

function setDate() {
  
	const now = new Date();

	const hours = now.getHours();
	const hoursDegrees = ((hours / 12) * 360) + 90;
	hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
  
	const minutes = now.getMinutes();
	const minutesDegrees = ((minutes / 60) * 360) + 90;
	minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;

	const seconds = now.getSeconds();
	const secondsDegrees = ((seconds / 60) * 360) + 90;
	secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

}

setInterval(setDate,1000);