JSFiddle - React, Tailwind, and code Playground

by Elena Shevchuk

HTML

<div class="one">
    <div class="two">text text</div>
</div>
<div class="b">text text</div>

CSS

.one {
    color: white;
    display: inline-block;
    -webkit-transform: rotate(-45deg) skew(20deg, 20deg);
    -moz-transform: rotate(-45deg) skew(20deg, 20deg);
    -ms-transform: rotate(-45deg) skew(20deg, 20deg);
    -o-transform: rotate(-45deg) skew(20deg, 20deg);
    transform: rotate(-45deg) skew(20deg, 20deg);
}
.two {
    width: 50px;
    height: 50px;
    background: linear-gradient(blue, yellow);
    -webkit-transform:skew(-20deg, -20deg) rotate(45deg);
}