JSFiddle - React, Tailwind, and code Playground

HTML

<div id='box'></div>
<div class='opposite'></div>
<div class='opposite a'>this one</div>

CSS

#box {
    height:50px;
    width:100px;
    background:red;
    -webkit-transform: skew(30deg);
}
.opposite {
    margin:50px;
    height:50px;
    width:100px;
    background:red;
    -webkit-transform: rotate(30deg) skew(30deg);
}
.a { -webkit-transform: skew(30deg) rotate(30deg); }