JSFiddle - React, Tailwind, and code Playground

HTML

<div id="clock">
    <div id="hand">
        <div id="topHand"></div>
    </div>    
</div>

CSS

#clock
{
    width: 200px;
    height: 200px;
    border: 3px solid yellow;
    border-radius: 50%;
    
    position: relative;
    -webkit-transform-style: preserve-3d;    
    -webkit-transform: rotateX(80deg) rotateY(20deg);
}

#hand
{
    width: 100%;
    height: 20px;
    
    position: absolute;
    top: 50%;
    margin-top: -10px;
    
    background: transparent;
    -webkit-transform-style: preserve-3d;
    -webkit-animation: rotate 1s infinite linear;
}

#topHand
{
    height: 100%;
    width: 20px;
    background: red;
    left: -10px;
    position: absolute;
    
    -webkit-animation: rotateFix 1s infinite linear;
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotateZ(0deg);
    }
    to {
        -webkit-transform: rotateZ(360deg);
    }
}

@-webkit-keyframes rotateFix {
    from {
        -webkit-transform: rotateX(90deg) rotateY(0deg);
    }
    to {
        -webkit-transform: rotateX(90deg) rotateY(-360deg);
    }
}