JSFiddle - React, Tailwind, and code Playground

HTML

<div class="z2" style="top: 5em; left: 5em; background: green;">
    <div class="z4" style="top: 1em; left: 1em; background: gold;"></div>
</div>
<div class="z1" style="top: 1em; left: 1em; background: red;">
    <div class="z3" style="top: 1em; left: 1em; background: blue;"></div>
</div>

CSS

.z1 { z-index: 1; }
.z2 { z-index: 2; }
.z3 { z-index: 3; }
.z4 { z-index: 4; }

div {
    position: absolute;
    width: 100px;
    height: 100px;
}