JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div id="test"></div>
</div>

CSS

.container  {
  overflow:hidden;
}
#test {
  height: 80px;
  width: 100%;
  background: green;
  position: relative;
  margin:0 auto;
}
#test:before {
  content: "";
  height: 100%;
  width: 120%;
  position: absolute;
  background: white;
  border-radius: 50%;
  bottom:-50%;
  left:-10%;
  transition: all 0.8s;
}
/*
div:after {
  content: "";
  height: 50%;
  width: 100%;
  position: absolute;
  background: white;
  border-radius: 50%;
  bottom: -25%;
  transition: all 0.8s;
}
*/