JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <header>
            Header
        </header>
        <div class="container">        
            <nav>
                Nav
            </nav>
            <section class="section-header-top">
                Section header top
            </section>
            <section class="section-header-bottom">
                Section header bottom
            </section>
            <section class="content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa omnis ratione facilis fugiat ducimus totam laborum similique nisi repellat qui sit quisquam repellendus saepe voluptatem natus cum consequuntur. Cupiditate officia.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus voluptatum facilis doloremque tempore a perspiciatis recusandae? Sapiente quaerat voluptatum. Tenetur aliquid ut facere placeat rem minima saepe. Velit modi esse.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa omnis ratione facilis fugiat ducimus totam laborum similique nisi repellat qui sit quisquam repellendus saepe voluptatem natus cum consequuntur. Cupiditate officia.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus voluptatum facilis doloremque tempore a perspiciatis recusandae? Sapiente quaerat voluptatum. Tenetur aliquid ut facere placeat rem minima saepe. Velit modi esse.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa omnis ratione facilis fugiat ducimus totam laborum similique nisi repellat qui sit quisquam repellendus saepe voluptatem natus cum consequuntur. Cupiditate officia.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus voluptatum facilis doloremque tempore a perspiciatis recusandae? Sapiente quaerat voluptatum. Tenetur aliquid ut facere placeat rem minima saepe. Velit modi esse.
                </section>
            </div>
    </body>

CSS

body,
    html {
        height: 100%;
        width:100%;
        margin: 0;
        padding: 0;
    }
    
    * {
        box-sizing: border-box;
    }
    
    .container {
        position: relative;
        height: calc(100% - 31px);
    }
    
    nav {                
        background: #0094ff;  
        border:1px solid black;
        position: absolute;
        left: 0px;
        width: 220px;
        height: 100%;
    }
    
    section {       
        background: #b6ff00;  
        height: 100%;
        overflow:hidden;
        margin-left: 220px;
    }
    
    section.section-header-top{
        height:55px;
        background: #ffd800; 
    }
    
    section.section-header-bottom{
        height:34px;
        background: #ff6a00; 
    }
    
    section.content{
        /* The 89px is the 55px + 34px from header sections */
        height: calc(100% - 89px);
        overflow-y: auto;
    } 
    
    header{
        background:blue;
        height:31px;    
        border:1px solid black;
    }