JSFiddle - React, Tailwind, and code Playground

HTML

<section id="test">
  <div class="bg"></div>
</section>

SCSS

#test {
  position: relative;
  width: 100%;
  height: 400px;
  
  .bg {
    width: 50%;
    height: 800px;
    -webkit-transition: all 300ms ease-in;
    background: black;
    border-radius: 80px 0px 0px 80px;
    position: absolute;
    right: 0;
    top: 0;
    -ms-transform: skewY(-9deg);
    -webkit-transform: skewY(-9deg);
    transform: skewY(-9deg);
  }
}