JSFiddle - React, Tailwind, and code Playground

HTML

<div id="red">
    
</div>

<div id="blue">
    <div id="green">
        
    </div>
</div>


<div id="red2">
    
</div>

<div id="blue2">
    <div id="green2">
        
    </div>
</div>

CSS

/* The interesting parts */
#red, #red2 {
    z-index: 2;
}
#blue {
    z-index: auto;
}
#blue2 {
    z-index: 0;
}
#green, #green2 {
    z-index: 3;
}

/* Formatting, color, etc.*/
div {
    position: relative;
    width: 100px; height: 100px;
}
#red, #red2 {
    background: red;
}
#green, #green2 {
    background: green;
}
#blue, #blue2 {
    background: blue;
}
#blue {
    top: -80px;
    left: 40px;
}
#green {
    top: 40px;
    left: -50px;
}
#red2 {
    top: -200px;
    left: 200px;
}
#blue2 {
    top: -280px;
    left: 240px;
    z-index: 0;
}
#green2 {
    top: 40px;
    left: -50px;
}