JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position:relative;margin-top: 50px">
    <div class="z a">
        <div class="z b"></div>
    </div>
    <div class="z c">
        <div class="z d"></div>
    </div>
</div>

CSS

.z{ position: absolute }
.a{ left: 10px; right: 10px; top: 10px; height: 50px; background-color: blue;}
.b{ left: 50px; right: 50px; top: 10px; height: 50px; background-color: red;}
.c{ left: 20px; right: 20px; top: 30px; height: 50px; background-color: green;}
.d{ left: 10px; right: 10px; top: 10px; height: 50px; background-color: purple;}
    

.a{ z-index: 1;}
.b{ z-index: 2;}
.c{ z-index: 3;}
.d{ z-index: 2;}