JSFiddle - React, Tailwind, and code Playground

by aanita0309

HTML

<div class="circle">
  <div class="circle1"></div>
  <div class="circle2"></div>
  <div class="circle3"></div>
  <div class="circle4"></div>
</div>

CSS

.circle{
  position:relative;
  width:50%;
  padding-bottom:50%;
  background:gold;
  border-radius:50%;
}
.circle1{
  position:relative;
  top:30%; left:30%;
  width:50%;
  transform: translate(-60%, -60%);
  margin:0;
  background:red;
  border-radius:50%;
}