style.css

body{
    margin : 0;
    box-sizing: border-box;
    background: teal;
    display: flex;
    justify-content : center;
    align-items: center;
    height : 100vh;
}

.clock{
    height : 31.25rem;
    width : 31.25rem;
    background-color:black;
    border-radius: 50%;
    border : 10px solid black;
    position : relative;
}

.number{
    --rotation : 0;
    font-family: 'Padauk', sans-serif;
    font-size : 2rem;
    color : white;
    /* border : 3px solid red; */
    position : absolute;
    width : 100%;
    height : 100%;
    text-align : center;
    transform : rotate(var(--rotation))
}
.number12{
    transform : rotate(0deg)
}
.number3 div{
    transform : rotate(270deg);
}

.hand{
    --rotation : 0;
    position : absolute;
    bottom : 50%;
    left : 50%;
    transform: translateX(-50%);
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    transform-origin: bottom;
}

.clock::after {
    content: '';
    position: absolute;
    background-color: #510087;
    z-index: 11;
    width: 2rem;
    height: 2rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }
.hour-hand{
    height : 30%;
    background-color: #7209b7;
    width : 20px;
    z-index: 1;
    
}

.minute-hand{
    height : 40%;
    background-color:#7a30d3;
    width : 10px;
    z-index: 2;
    transform : rotate(30deg);
}

.second-hand{
    
    height :  35%;
    background-color : #c278ff;
    width : 5px;
    z-index : 3;
    transform : rotate(--rotation);
}