JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
  <div class="inner"></div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.outer {
  position: relative;
  height: 300px;
  background: red;
  overflow: hidden;
}

.inner {
  width: 40%;
  height: 500px;
  position: absolute;
  right: -200px;
  top: -140px;
  transform: rotate(-35deg);
  background: green;
  border-top-left-radius: 30px;
}