JSFiddle - React, Tailwind, and code Playground

by CybArt

HTML

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

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

CSS

#container {
                padding-top: 10%;
                padding-bottom: 10%;
                background: white url(http://famok.com/wp-content/uploads/2016/10/WhiteOnWhite.jpg) top left / 26px 32px repeat;
                width: 100%;
                height: 100%;
                overflow: hidden;

}


#parallelogram {
  margin-left: 30%;
	width: 100%;
	height: 900px;
	-webkit-transform: skew(-15deg);
	   -moz-transform: skew(-15deg);
	     -o-transform: skew(-15deg);
          transform: skew(-15deg);
	background: white;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
 -moz-box-shadow:    inset 0 0 15px rgba(0, 0, 0, .4);
   -webkit-box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
   box-shadow:         inset 0 0 15px rgba(0, 0, 0, .4);
}