JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">


<div class="around top-left">

</div>
<div class="around top-right">

</div>
<br>
<div class="around bottom-left">

</div>
<div class="around bottom-right">

</div>

<div class="content">
 
</div>

</div>

CSS

.container{
  position:relative;
  width:200px;
  height:200px;
}
.content{
  width:50%;
  height:50%;
  left:50px;
  top:50px;
  position:absolute;
  background-color:white;
  z-index:1;
  border-radius:50%;
}
.around{
  background-color:red;
  width:100px;
  height:100px;
  display:inline-block;
  position:absolute;
}
.top-left{border-top-left-radius:100%; top:0; left:0; background:blue;}
.top-right{border-top-right-radius:100%; top:0; right:0;background:green;}
.bottom-left{border-bottom-left-radius:100%; bottom:0; left:0;background:orange;}
.bottom-right{border-bottom-right-radius:100%; bottom:0; right:0;background:purple;}