JSFiddle - React, Tailwind, and code Playground

by Vivek Vikranth

HTML

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

   <p>UPLOAD FILES</p>
   </span>
    <span class="works_section" id="team_circle">
    
    
     <p>TEAM REVIEW</p>
   </span>
    <span class="works_section" id="development_circle">
   
   </span>
    <span class="works_section" id="testing_circle">

     <p>TESTING</p>
   </span>
    <span class="works_section" id="delivery_circle">

     <p>DELIVERY</p>
   </span>
   </div>

CSS

.works_section{
     float: left;
  width: 201px;
  height: 201px;
  border-radius: 101px;
  display: block;
  position: relative;
}
 #upload_circle {
  background-color: #25aed2;
  z-index: 1;
}
 #team_circle {
  background-color: #f1ce0d;
  z-index: 2;
  left: -21px;
}
 #development_circle {
  background-color: #26e489;
  z-index: 1;
  left: -42px;
}
 #testing_circle {
  background-color: #ec1a5f;
  z-index: 2;
  left: -63px;
}
 #delivery_circle {
  background-color: #25c8d2;
  z-index: 1;
  margin-left: -82px;
}