JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circle circle-green">
   <div class="circle circle-red"></div>
 </div>

CSS

.circle{
  width:250px;
  height:250px;
  border-radius:50%;
}
.circle-green{
  background:green;
  overflow:hidden;
  position:relative;
}
.circle-red{
  background:red;
  right:-60%;  
  position:absolute;

}