JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head></head>

<body>
    
    <div id="wrapper">
        <div id="header"></div>
        <div id="fader"></div>
        <div id="body">
            <div id="viewer"></div>
                
        </div>
    </div>
    <div id="footer" > a</div>
</body>
</html>

CSS

body,html
{
 height: 100%;
background-color: #2c2c28;   
}
#header
{
 position:relative;
    z-index:999;
 background-color:red;
    height:45px;
}
#footer
{
    height:45px;
    background-color:blue;
    
}
#wrapper
{
   height:100%; 
   margin-bottom:-45px;
}
#viewer
{
    margin-top:65px;   
height:100%;
background-color:yellow;   overflow-y: hidden;  
}
#body
{
    margin-top:-65px;   
    background-color:pink;
    height:100%;   
    overflow-y: hidden;
}
#fader
{
 position:relative;
    z-index:999;
 height:20px;   
}