JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block1"></div>
<div class="block2"></div>

CSS

.block1 {
        padding: 0 10px;
        position: relative;
        top: -11px;
        left: -2px;
        z-index: 9;
        width:400px;
        height:50px;  
background:#ddd;        
}

.block1::after {
        content: "";
        position: absolute;
        bottom: 17px;
        left: 4%;
        width: 92%;
        height: 30%;
        box-shadow: 0 26px 25px rgba(0, 0, 0, 0.7);
        z-index: 8;
}

.block2 {
        padding: 0 10px;
        position: relative;
        left: 12px;
        right: 12px;
        margin-top: -11px;
        z-index: 7;
        width:400px;
        height:50px; 
background:#ddd;    
}

.block2::after {
        content: "";
        position: absolute;
        bottom: 17px;
        left: 4%;
        width: 92%;
        height: 30%;
        box-shadow: 0 26px 25px rgba(0, 0, 0, 0.7);
        z-index: 6;

}