JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<div id="main-circle"></div>

CSS

body {
  background: #E3516E;
}
#main-circle {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 3rem auto;
  background: linear-gradient(135deg, #51B5A9 50%, transparent 50.1%);
  border-radius: 50%;
}
#main-circle::before, #main-circle::after {
  position: absolute;
  display: block;
  content: "";
  width: 150px;
  height: 150px;
  z-index: 100;
  border: 150px solid transparent;
  border-radius: 50%;
  box-sizing: border-box;
}

#main-circle::before {
  top: 0;
  right: 0;
  border-top-color: #FADE8B;
  transform: rotate(45deg);
}

#main-circle::after {
  bottom: 0;
  left: 0;
  border-bottom-color: #F7F3D7;
  transform: rotate(45deg);
}