JSFiddle - React, Tailwind, and code Playground

HTML

<div id="circle">
    <div id="cover"></div>        
    <div id="innerCircle">     
        <div id="rect1"></div>
        <div id="rect2"></div>
    </div>
</div>

CSS

#circle { 
   width: 140px;
   height: 140px;
   background: red; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
    margin: 0 auto;
    position: relative;
    top: -50px;
}

#innerCircle { 
   width: 90px;
   height: 90px;
   background: white; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
    position: absolute;
    top: 25px;
    right: 25px;
}

#rect1 {
    width: 20px; 
   height: 90px; 
   background: white;
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
    position: absolute;
    top: 50%;
    left: 5px;
}

#rect2 {
   width: 20px; 
   height: 90px; 
   background: white;
transform: rotate(-30deg);
-ms-transform: rotate(-30deg); /* IE 9 */
-webkit-transform: rotate(-30deg); /* Safari and Chrome */
    position: absolute;
    top: 50%;
    right: 5px;
}

#cover {
   width: 150px; 
   height: 80px; 
   background: white;
    position: absolute;
    top: 0px;
    left: 0px;
}