JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id='hd'>
      This will stay on the top of the browser window.
    </div>
    <div id="sidebar">
      This will stay on the left.
    </div>
    <div id="overlay">
    </div>
    <div id="content">
        1This will scroll normally.<br/>
        2This will scroll normally.<br/>
        3This will scroll normally.<br/>
        4This will scroll normally.<br/>
        5This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>  
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>
        This will scroll normally.<br/>  
    </div>
</body>

CSS

body{
        margin: 0;
        padding: 0;
      }
      #hd{
        display: block;
        position: fixed;
        z-index: 10; /* keeps the header over the content as the content gets scrolled */
        top: 0;
        width: 100%;
        height: 20px;
        padding: 10px;
        background-color:yellow;
      }
      #sidebar {
        position: fixed;
        top: 40px; /* add height + padding of header */
        left: 0;
        width: 150px;
        padding: 10px;
        background-color: blue;
        
      }
      #content {
        margin: 40px 0 0 170px; /* add adjacent elements' size + padding */
    z-index:1;
    position:absolute;
      }
#overlay{
        top:40px;
    bottom:0;
    left:170px;
    width:370px;
    height:352px;
        background-color:red;
        border-radius:10px;
        border-style:solid;
        border-color:#red;
        position:fixed;
    
}