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: white url(http://famok.com/wp-content/uploads/2016/10/WhiteOnWhite.jpg) bottom left / 26px 32px repeat;
                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;
 -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);
}

#bottom {
  height: 200px;
  width: 100%;
  background: white;
   -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);
}

#bottom-corner {
  height: 100px;
  width: 300px;
  margin-left: -34px;
  background: white url(http://famok.com/wp-content/uploads/2016/10/WhiteOnWhite.jpg) top left / 26px 32px repeat;
    -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);
          
           -moz-box-shadow:    0 0 15px rgba(0, 0, 0, .4);
   -webkit-box-shadow:  0 0 15px rgba(0, 0, 0, .4);
   box-shadow:          0 0 15px rgba(0, 0, 0, .4);
}