JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper-wrapper">
  <div class="content">
    <p>
      Hier hast du<br>deinen Code :D
    </p>
  </div>
  <div class="wrapper">
    <div class="circles"></div>
    <div class="theme-space"></div>
    <div class="bg-color-space"></div>
  </div>
</div>

SCSS

* {
  margin: 0;
  padding: 0;
}

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

$content-height: 200px;

.wrapper-wrapper {
  height: $content-height + $height * 1.5;
  width: $width;
  position: relative;
}

.content {
  height: $content-height + $height * 0.5;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: Arial;
  color: white;
  background: $theme-color;
}

.wrapper {
  background: $background-color;
  width: $width;
  height: $height;
  position: absolute;
  bottom: 0;
}

.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;
}