JSFiddle - React, Tailwind, and code Playground

by Alan Guerrero

HTML

<div class="container">
    <div id="parallelogram">
    </div>
</div>

CSS

.container{
    overflow:hidden;
}
#parallelogram {
    width: 100%;
    height: 100px;
    margin: 0 0 0 45px;
    -webkit-transform: skew(40deg);
       -moz-transform: skew(40deg);
         -o-transform: skew(40deg);
    background: #8C191D;
    overflow:hidden;
    position:relative;
    -moz-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
    -webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
    box-shadow: 1px 2px 3px rgba(0,0,0,.5);
}