JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top">
    The top bar
</div>
<div id="container">
    <div id="background">        
    </div>
    <nav>
        Test
    </nav>
</div>

CSS

#top{  
    background-color: #f0f0f0;
    border-bottom: 1px solid #555;
    box-shadow: 8px 8px 8px #aaa;
}

#container {
    position: relative;
    top: -1px;
    overflow: hidden;
    height: 96px;
}

#background {
    background-color: #f0f0f0;
    
    position: absolute;
    top: -1px;
    left: -32px;
    border: 1px solid #555;
    
    width: 400px;
    height: 64px;
    box-shadow: 8px 8px 8px #aaa;
    
   -webkit-transform: skew(-20deg); 
   -moz-transform: skew(-20deg); 
   -o-transform: skew(-20deg);
   -ms-transform: skew(-20deg); 
   transform: skew(-20deg);
}

NAV {
    position: absolute;
    top: 24px;
    left: 24px;    
}