JSFiddle - React, Tailwind, and code Playground

HTML

<div id="circle">
    <div class="hand"></div>
    <div class="hand"></div>
    <div class="hand"></div>
    <div class="hand"></div>
</div>

CSS

#circle {
        background:#ccc;
        border-radius:50%;
        width:25%;
        height:0;
        padding-top:25%;
        position:relative;
    }
    
    .hand {
        background:black;
        width:1px;
        height:100%;
        position:absolute;
        left:50%;
        top:0;
    }
    
    .hand:nth-child(2) {
        transform:rotate(90deg);
    }
    
    .hand:nth-child(3) {
        transform:rotate(45deg);
    }
    
    .hand:nth-child(4) {
        transform:rotate(135deg);
    }
    
    #circle:after {
        content:'';
        display:block;
        width:80%;
        height:80%;
        border-radius:50%;
        background:white;
        position:absolute;
        top:10%;
        left:10%;
    }