JSFiddle - React, Tailwind, and code Playground

HTML

<header class="header-container">
    <div class="site-header">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non consequat lacus, sed rhoncus leo. Aenean in posuere est. In hendrerit turpis nec pharetra volutpat. Suspendisse eu dui dolor. Aenean luctus ultrices leo, ut sodales eros feugiat efficitur. 
    </div> <!-- .site-header -->
<header> <!-- .header-container -->

SCSS

* {
    margin: 0;
}
.site-header {
    background-color: #0c3063;
    width: 460px;
    height: 100px;
    @include clearfix;
    position: relative;
    z-index: 1;
    
    &:before {
        content: "";
        width: 100px;
        position: absolute;
        top: -134px;
        right: -97px;
        width: 300px;
        height: 150px;
        background-color: #0c3063;
        transform: rotate(45deg);
        z-index: 10;
    }
}