JSFiddle - React, Tailwind, and code Playground

by CybArt

HTML

<div id="container">
<div id="parallelogram">

</div>
<div id="bottom">
<div id="bottom-corner">

</div>
</div>
</div>

CSS

#container {
                padding-top: 100px;
                background: red;
                width: 100%;
                height: 100%;
                overflow: hidden;

}


#parallelogram {
  margin-left: 400px;
	width: 100%;
	height: 900px;
	-webkit-transform: skew(-15deg);
	   -moz-transform: skew(-15deg);
	     -o-transform: skew(-15deg);
          transform: skew(-15deg);
	background: white;
  -moz-border-top-left-radius: 100px;
  -webkit-top-left-border-radius: 100px;
  border-top-left-radius: 100px;

}

#bottom {
  height: 200px;
  width: 100%;
  background: white;
  
}

#bottom-corner {
  height: 100px;
  width: 300px;
  margin-left: -34px;
  background: red;
    -moz-border-bottom-right-radius: 100px;
  -webkit-bottom-right-border-radius: 100px;
  border-bottom-right-radius: 100px;
  	-webkit-transform: skew(-15deg);
	   -moz-transform: skew(-15deg);
	     -o-transform: skew(-15deg);
          transform: skew(-15deg);
}