JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div class="tr">
    <div class="content"> ... CONTENT HERE ...</div>
</div>

CSS

.tr{
    padding-bottom:30%;
    position:relative;
    overflow:hidden;
}
.tr:before{
    content:'';
    position:absolute;
    top:0; left:0;
    width:120%; height:100%;
    background-color : #0079C6;
    
    -webkit-transform-origin:0 100%;
    -ms-transform-origin:0 100%;
    transform-origin:0 100%;
    
    -webkit-transform: rotate(-17deg);
    -ms-transform: rotate(-17deg);
    transform: rotate(-17deg);
}
.content{
    position:absolute;
}