JSFiddle - React, Tailwind, and code Playground

HTML

<div class="g">
  <div class="y" style="border-bottom-right-radius: 100px;"></div>
  <div class="y" style="border-bottom-left-radius: 100px;"></div>
  <div class="y" style="border-top-right-radius: 100px;"></div>
  <div class="y" style="border-top-left-radius: 100px;"></div>
</div>

CSS

* {
  margin:0px;
  padding: 0px;
}

.g {
  background: #1A4341;
  width: 400px;
  height: 200px;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
}

.y {
  background: #F3AC3C;
  width: 100%;
  height: 100%;
  display: block;
}