JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="body">
<div id="parallelogram"></div>
<div class="text">TEXT</div>
</div>

CSS

.body {
    position: relative;
    height: 400px;
    width: 400px;
    margin: auto;
    background: yellow;
    }
    #parallelogram {
    position: absolute;
    left: 120px;
    width: 150px;
    height: 100px;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -o-transform: skew(-20deg);
    background: black;
    z-index: 1;
}
.text {
    position: absolute;
    left: 170px;
    top: 30px;
    font-size: 20px;
    color: red;
    z-index: 5;
}