JSFiddle - React, Tailwind, and code Playground

HTML

<div class="topside">
  <div class="leftside">
  </div>
  <div class="centerside">
    <div class="intopside"></div>
  </div>
  <div class="rightside">
  </div>
</div>

<div class="bigwrapper">
  <div class="leftside">
    <div class="left-top-side"></div>
    <div class="left-bottom-side"></div>
  </div>

  <div class="centerside">
    <div class="centerside-side"></div>
  </div>

  <div class="rightside">
    <div class="right-top-side"></div>
    <div class="right-bottom-side"></div>
  </div>
</div>

<div class="bottomside">
  <div class="inbottomside"></div>
<div>


<div class="botside">
    <div class="inbotside"></div>
</div>

CSS

.bigwrapper {
  display:block;
  position:relative; 
  background-color: red; 
  width:600px;
  text-align:center;
  overflow:hidden;
  margin:0;
}   

.leftside,
.rightside {
  background:cyan;
}   


.leftside,
.centerside,
.rightside {
  width:200px; 
  float:left; 
  display:block;
  margin:0; 
  z-index:10;
}

.centerside {
  line-height: 150px;
  vertical-align:middle;
  display:inline-block;
  overflow:hidden;
  margin-left: -32px;
  margin-right: -32px;
  z-index:100 !important;
}

.centerside-side {
  float:none; 
  margin-top:50px; 
  height:100px !important;
  z-index:100 !important;
  border-radius: 150px !important;
}

.inbotside,
.intopside,
.centerside-side, 
.left-top-side, 
.left-bottom-side,
.right-top-side, 
.right-bottom-side {
  display:inline-block;
  position:relative; 
  background: blue; 
  height: 100px; 
  width:100%;
  border-radius: 50%; 
  float:left;
  border:solid thin white; 
  z-index:10;
}

.topside {
  width:600px;
  display:block; 
  overflow:hidden; 
    text-align:center; 
    margin-bottom:-50px;
  z-index:101 !important;
    position:relative;     background-color:pink;


}

.intopside {
  width: 150px; 
  text-align:center; 
  float:none;
  z-index:101 !important;
  position:relative; 

}

.botside {
  width:600px;
  display:block; 
  overflow:hidden; 
    text-align:center; 
  z-index:101 !important;
    position:relative;
    background-color:pink;

}

.inbotside {
  width: 150px; 
  text-align:center; 
  float:none;
  z-index:101 !important;
  position:relative; 
}