JSFiddle - React, Tailwind, and code Playground

HTML

<div id='container'>
    Blue: Outer, <br>
    Purple: Middle<br>
    Yellow: Inner<br>
    <div id='inner'>
      <div id='inner-inner'>
        Inner block
      </div>
    </div>
    <div id='outer'> 
        <div id='middle'>
        </div>
    </div>
</div>

CSS

#inner{
    position: fixed; 
    top: 0px; 
    background: rgba(200,180,80, .8); 
    padding: 5px; margin: 5px; 
    box-shadow: 3px 3px 3px #333; 
    height: 10%;
    left: 0px;
    z-index: 999;
}

#inner-inner{
    -webkit-transform:translate3d(0px, 20px , 0px);
}

#middle{
    position:relative; 
    border: 1px dotted #445511; 
    height: 300px; 
    padding: 5px; 
    background: rgba(250,10,255, .6);
}


#outer
{
    position:relative; 
    border: 1px solid #5511FF; 
    height: 100%; 
    -webkit-transform:translate3d(0px, 20px , 0px);
    height: 300px; 
    padding: 10px; 
    background: rgba(100,180,250, .8); 
    width: 80%;
}

#container{
    font-family: Helvetica;
}