JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block block1"></div>
<div class="block block2"></div>
<div class="block block3"></div>

CSS

.block {
  height: 300px;
}
.block1 {
  background: red;
}
.block2 {
  background: green;
  border-radius: 50% 50% 0 0 / 70px 70px 0 0;
  margin-top: -70px;
}
.block3 {
  background: yellow;
  border-radius: 50% 50% 0 0;
  border-radius: 50% 50% 0 0 / 70px 70px 0 0;
  margin-top: -70px;
}