JSFiddle - React, Tailwind, and code Playground

HTML

<div class="foo"></div>

CSS

.foo {
    position: relative;
    width: 200px;
    height: 100px;
    background: blue;
}

.foo:after {
    content: '';
    display:block;
    height:100px;
    width: 100px;
   -webkit-transform: skew(30deg, 0deg);
    background: red;
    left: 150px;
    position:absolute;
}