JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap-lg">

  <div id="lt" class="quarter"></div>
  <div id="rt"  class="quarter"></div>
  <br>
  <div id="lb"  class="quarter"></div>
  <div id="rb"  class="quarter"></div>

  <div id="center"></div>

</div>

CSS

:root {
  font-size: 0px;
}

.wrap-lg {
  width: 200px;
  height: 200px;
  border-radius: 100%;
}

.quarter {
  width: 50%;
  height: 50%;
  display: inline-block;
  font-size: 0;
  background: black;
  overflow: hidden;
}

#center {
  width: 80%;
  height: 80%;
  background-color: white;
  position: relative;
  border-radius: 100%;
  margin: 10%;
  left: 0px;
  top: -100%;
}

.quarter::after, 
.quarter::before {
  content: "";
  display: block;
  filter: blur(3px);
}

#lt {
  border-radius: 100% 0 0 0;
  background: linear-gradient(45deg, #ffc107 0%,#ff9800 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#lt::before {
    width: 20%;
    height: 90%;
    margin-left: 90%;
    background-color: #FF9800;
}

#lt::after {
  width: 20%;
  height: 20%;
  background-color: #ffc107;
}

#rt {
  border-radius: 0 100% 0 0;
  background: linear-gradient(135deg, #ff9800 0%,#ff5722 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#rt::before {
  width: 20%;
  height: 90%;
  margin-left: -10%;
  background-color: #FF9800;
}

#rt::after {
  width: 110%;
  height: 20%;
  background-color: #ff5722;
}

#lb {
  border-radius: 0 0 0 100%;
  background: linear-gradient(135deg, #ffc107 0%,#ffeb3b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#lb::before {
  width: 100%;
  height: 20%;
  margin-left: -10%;
  background-color: #ffc107;
}

#lb::after {
  width: 20%;
  height: 20%;
  margin-left: 90%;
  margin-top: 70%;
  background-color: #ffeb3b;
}

#rb {
  border-radius: 0 0 100% 0;
  background: linear-gradient(45deg, #ffeb3b 0%,#cddc39 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#rb::before {
  width: 100%;
  height: 20%;
  margin-top: -10%;
  background-color: #cddc39;
}

#rb::after {
  width: 20%;
  height: 20%;
  margin-left: -10%;
  margin-top: 70%;
  background-color: #ffeb3b;
}