JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

div {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg);
    
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;
    
    -webkit-backface-visibility: hidden;
}
div:after {
    content: "";
    display: block;
    position: absolute;
    border-style: solid;
    border-color: #FFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    border-width: 145px 0 25px 19px;
    right: -1px;
    top: 0;
}
div:before {
    background: rgba(255, 0, 0, 0.45);
    width: 668px;
    height: 240px;
    content: "";
    display: block;
    
    -webkit-transform: rotate(-9.5deg) skewX(1deg);
    -moz-transform: rotate(-9.5deg) skewX(1deg);
    -ms-transform: rotate(-9.5deg) skewX(1deg);
    -o-transform: rotate(-9.5deg) skewX(1deg);
    transform: rotate(-9.5deg) skewX(1deg);
    
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;
    
    -webkit-backface-visibility: hidden;
}

body {
    margin: 0;
}