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 class="push"></div>
    </div>
    <div id="footer" > a</div>
</body>
</html>

CSS

body,html
{
 height: 100%;
background-color: #2c2c28;   
}
#header
{
 background-color:red;
    height:45px;
}
#footer
{
    height:45px;
    background-color:blue;
    
}
.push{
    height:45px;
}
#wrapper
{
  min-height: 100%;
  height: auto !important;
  height: 100%;
/*  margin: 0 auto -4em;*/
margin-bottom:-45px;   
   
}
#viewer
{
height:100%;
background-color:yellow;   overflow-y: hidden;  
}
#body
{
    background-color:pink;
 height:100%;   
    overflow-y: hidden;
}
#fader
{
 height:20px;   
}