JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <div id="header">head</div>
        <div id="content">plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/>plop<br/></div>
        <div id="footer">foot</div>
    </body>
</html>

CSS

html, body{
    height: 100%;            
}

#header{
    position:fixed;
    top:0px;
    width:100%;
    height:63px;
    background-color:#ff5500;

}
#content{
    width:100%;
    height:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border-top : 63px solid transparent;
    border-bottom : 144px solid transparent;
    overflow:auto;
}
#footer{
    position:fixed;
    bottom:0px;
    width:100%;
    height:144px;
    background-color:#ff5500;
}