JSFiddle - React, Tailwind, and code Playground

HTML

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

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

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

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

CSS

#red {
   margin:0 auto 0;
   width:406px;
   height:60px;
   background-color:red;
   position:relative;
   z-index:100;   
}
#red_placer {
   width:100%;
   position:fixed;
   top:85px;
   z-index:100; 
}
    
#green{
   background-color:green;
   height:100px;
   width:100%;
   top:0;
   position:fixed;
   z-index:200; 
}

#blue{
   margin:30px auto 0;
   width:60px;
   height:465px;
   background-color:blue;
   position:relative;
   z-index:300;
}

#yellow {
   margin:0px auto 0;
   width:170px;
   height:170px;
   background-color:yellow;
   position:relative;
   z-index:400;   
}
#yellow_placer {
   width:100%;
   position:fixed;
   top:0;
   z-index:400; 
}