JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

div {
    height: 100px;
    width: 220px;
    overflow: hidden;
    position: relative;
    -webkit-transform: skewX(45deg);
    -moz-transform: skewX(45deg);
    transform: skewX(45deg);
}
div:before {
    content: '';
    position: absolute;
    left: 10px;
    height: 100px;
    width: 200px;
    background: red;
    -webkit-transform: skewX(-45deg);
    -moz-transform: skewX(-45deg);
    transform: skewX(-45deg);
}