JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="header">Header</div>
    <div id="content">
        <ul>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
        </ul>    
    </div>
    <div id="footer">Footer</div>    
</div>

CSS

#wrapper{
    position: relative;
    background: #f5f5f5;
    height: 400px;
    margin: 0;
    padding:  10px;
}

#header, #footer{
    position: absolute;
    background: #000;
    color: #fff;
    height: 20px;
    width: 100%;
    margin-left: -10px;
}

#header{
    top: 0;
}

#footer{
    bottom: 0;
}

#content{
    position: absolute;
    top: 20px;
    bottom: 20px;
    overflow: auto;
    width: 100%;
    margin-left: -10px;
}