JSFiddle - React, Tailwind, and code Playground

HTML

<div id="par">
<p>qwerqwerqwerqw</p>
<h1>fasdfasdfafsa</h1>
</div>

CSS

#par {
				width: 500px;
				height: 150px;
				-webkit-transform: skew(160deg);
				   -moz-transform: skew(160deg);
				     -o-transform: skew(160deg);
				position: absolute;
				border: 2px solid #000000;;
			}
      p {	-webkit-transform: skew(-160deg);
				   -moz-transform: skew(-160deg);
				     -o-transform: skew(-160deg);}
       h1{-webkit-transform: skew(-160deg);
				   -moz-transform: skew(-160deg);
				     -o-transform: skew(-160deg);}