JSFiddle - React, Tailwind, and code Playground

HTML

<div id="par">
<span>
<p>qwerqwerqwerqw</p>
<h1>fasdfasdfafsa</h1>
</span>
</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;
			}
      #par span {
margin-left:30px;
				-webkit-transform: skew(-160deg);
				   -moz-transform: skew(-160deg);
				     -o-transform: skew(-160deg);
				position: absolute;
		
      }