JSFiddle - React, Tailwind, and code Playground

HTML

<div class="logo-menu">
    <div class="first-part">
        <div class="menu-1" style="height: 167px;">
             <h3>About Us</h3>

        </div>
        
        
    </div>

CSS

.logo-menu {
    height: 76%;
    left: 11%;
    margin: 0 auto;
    width: 80%;
}
.first-part {
    display: inline-block;
    left: 135px;
    position: relative;
    transform: skew(-22deg);
    width: 180px;
}
.menu-1 {
    background:red
}
.menu-2 {
    background:blue
}
.menu-3 {
    background:yellow
}
.second-part {
    top: 36%;
}
.second-part {
    display: inline-block;
    height: 100%;
    left: 0;
    position: relative;
    top: 18%;
    width: 520px;
}
.second-part .triangle-shape {
    left: 4%;
    margin: 0;
    max-width: 700px;
    position: absolute;
}
.wrap {
    display: inline-block;
    margin: 240px 0;
    transform: rotate(45deg) translate3d(0px, 0px, 0px);
    transition: transform 300ms ease-out 0s;
    width: 500px;
}
.crop {
    height: 465px;
    margin: 0;
    overflow: hidden;
    position: relative;
    transform: skew(22deg, 22deg) translate3d(0px, 0px, 0px);
    width: 450px;
}
.crop img {
    height: 650px;
    left: -50%;
    opacity: 1;
    position: absolute;
    top: -50%;
    transform: skew(-20deg, -20deg) rotate(-45deg);
    transition: opacity 300ms ease-in-out 0s;
    width: 500px;
}