JSFiddle - React, Tailwind, and code Playground

by adelura

HTML

<div class="box"></div>

SCSS

body {
    margin: 0;
    padding: 0;
}

.box {
    position: relative;
    overflow: hidden;
    height: 200px;
    width: 100%;
  
  &:before {
      content: '';
      position: absolute;
      bottom: 1px;
      left: -100px;
      right: -100px;
      height: 100%;
      
      background: lightblue;
      border-radius: 0 0 50% 50% / 0 0 100px 100px;
  }
}