JSFiddle - React, Tailwind, and code Playground

by kdubrovchenko

HTML

<div id='parallelogram'>
<p id="straight">Хочу быть ровным</p>
</div>

CSS

#parallelogram {
	width: 170px;
	height: 100px;
	-webkit-transform: skew(-30deg);
	   -moz-transform: skew(-30deg);
	     -o-transform: skew(-30deg);
	background: red;
  text-align: center;
}

#straight{
  	-webkit-transform: skew(30deg);
	   -moz-transform: skew(30deg);
	     -o-transform: skew(30deg);
}