JSFiddle - React, Tailwind, and code Playground

HTML

<div id="red" class="base block level-1">
    <span>z-index 1</span>
    <div id="blue" class="half-block level-3">
        <span>z-index 3 inside z-index 1</span>
    </div>
</div>
<div id="green" class="base block level-2">
    <span>z-index 2</span>
    <div id="black" class="half-block level-1">
        <span>z-index 1 inside z-index 2</span>
    </div>
</div>

CSS

.base, .base > * { position: absolute; }
.block { width: 200px; height: 200px; }
.half-block { width: 100px; height: 100px; }
.level-1 { z-index: 1; }
.level-2 { z-index: 2; }
.level-3 { z-index: 3; }
div > span {
    display: block; width: 100%;
    color: #fff; text-align: center;
}
#red { background-color: #c00; top: 0; left: 0; }
#blue { background-color: #00c; top: 50px; left: 50px; }
#green { background-color: #0c0; top: 100px; left: 100px; }
#black { background-color: #000; top: 0; left: 0; }