JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contain skew">

</div>
<div class="contain overlay">
<p>hey i'm straight, ok?</p>    
</div>

CSS

.skew {    
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
    transform: skew(-20deg);
    
}

.contain
{
    width: 200px;
    height:50px;
    background: red;
    margin-left:20px;
}

.overlay
{
    margin:-50px 0px 0px 20px;
    background:none;
}

p {
   -webkit-transform: skew(0deg) !important;
-moz-transform: skew(0deg) !important;
-o-transform: skew(0deg) !important;
    transform: skew(0deg) !important; 
}