JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="circles"></div>
  <div class="theme-space"></div>
  <div class="bg-color-space"></div>
</div>

SCSS

$width: 200px;
$height: 100px;
$theme-color: orange;
$background-color: white;

.wrapper {
  background: $background-color;
  width: $width;
  height: $height * 1.5;
  position: relative;
}

.circles {
  background:
    radial-gradient($width $height at $width/2 $height, $background-color 50%, transparent 0%),
    radial-gradient($width $height at $width/2 0px, $theme-color 50%, transparent 0%);

  background-repeat: no-repeat;
  z-index: 1;
  width: $width;
  height: $height * 1.5;
  position: relative;
}

.theme-space {
  background: $theme-color;
  width: $width;
  height: $height;
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.bg-color-space {
  background: $background-color;
  width: $width / 2;
  height: $height;
  z-index: 0;
  position: absolute;
  top: 0;
  right: 0;
}