JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
   <span class="works_section" id="upload_circle">

   
   </span>
    <span class="works_section" id="team_circle">
    
    
     
   </span>
    <span class="works_section" id="development_circle">
   
   </span>
    <span class="works_section" id="testing_circle">

     
   </span>
    
   </div>

CSS

.works_section{
     float: left;
  width: 100px;
  height: 100px;
  border-radius: 101px;
  display: block;
  position: relative;
}
 #upload_circle {
  background-color: #25aed2;
  z-index: 0;
}
 #team_circle {
  background-color: white;
  z-index: 1;
  left: -21px;
    background-image: -moz-radial-gradient(
        -37px 50%, /* the -37px left position varies by your "gap" */
        circle closest-corner, /* keep radius to half height */
        transparent 0, /* transparent at center */
        transparent 55px, /*transparent at edge of gap */
        #f1ce0d 56px, /* start circle "border" */
        #f1ce0d 57px /* end circle border and begin color of rest of background */
    );
}
 #development_circle {
  background-color: #fff;
  z-index: 1;
  left: -42px;
    background-image: -moz-radial-gradient(
        -37px 50%, /* the -37px left position varies by your "gap" */
        circle closest-corner, /* keep radius to half height */
        transparent 0, /* transparent at center */
        transparent 55px, /*transparent at edge of gap */
        #26e489 56px, /* start circle "border" */
        #26e489 57px /* end circle border and begin color of rest of background */
    );
}
 #testing_circle {
  background-color: #fff;
  z-index: 2;
  left: -63px;
    background-image: -moz-radial-gradient(
        -37px 50%, /* the -37px left position varies by your "gap" */
        circle closest-corner, /* keep radius to half height */
        transparent 0, /* transparent at center */
        transparent 55px, /*transparent at edge of gap */
        #EC1A5F 56px, /* start circle "border" */
        #EC1A5F 57px /* end circle border and begin color of rest of background */
    );
    
}