JSFiddle - React, Tailwind, and code Playground

HTML

<div id="green">

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

</div>


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

CSS

/*RED GREEN BLUE YELLOW*/
#green{
    background-color:green;
    height:100px;
    width:100%;
    position:fixed;
    top:0;
}

#red {
    margin:-85px auto 0;
    width:406px;
    height:60px;
    background-color:red;
z-index:-99999;    
    position:relative;
}

#blue{
    margin:350px auto 0;
    width:60px;
    height:765px;
    z-index:99998;
    background-color:blue;
    position:relative;
}

#yellow {
    margin:0px auto 0;
    width:170px;
    height:170px;
    background-color:yellow;
    z-index:99999;   
    position:relative;
}