JSFiddle - React, Tailwind, and code Playground

HTML

<div class="crop">
    <div class="skew"></div>
</div>

CSS

.crop {
    width: 492px;
    height: 240px;
}

.skew {
    display: block;
    height : 100px;
    width : 500px;
    background : blue;
    margin : 0 auto 0 32px;
    position:relative;
    -webkit-transform: skew(-130deg);
    -moz-transform: skew(-30deg);
    -ms-transform: skew(-30deg);
    transform: skew(-30deg);
}