JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div id="header"> Header Content
    </div>
    <div id="content" class="scrollable">
        <ul >
                <li>

                        Hello World!!!
                </li>
             <li>

                        Hello World!!!
                </li>
             <li>

                        Hello World!!!
                </li>
             <li>

                        Hello World!!!
                </li>
            <li>

                        Hello World!!!
                </li>
            <li>

                        Hello World!!!
                </li>
            <li>

                        Hello World!!!
                </li>
            </ul>
    </div>
    <div id="footer">I am Footer
    </div>
</div>

CSS

body {
            margin: 0;
        }
#main{
   position: absolute;
            width: 100%;
            top: 0;
            bottom: 0;}
#header
{
position: absolute;
    height: 41px;
            top: 0;
            left: 0;
            right: 0;
    text-align:center;
    display:block;
    background: blue;
}
#content
{
    position: absolute;
            top: 41px;
            bottom: 0;
            left: 0;
            right: 0;
    overflow:scroll;
     
    
}
#footer
{
 position: absolute;
      height: 41px;
            bottom: 0;
            left: 0;
            right: 0;
     text-align:center;
    display:block;
    background: blue;
}

li{
    text-decoration: none;
    display: block;
    height: 20px;
    width: 100%;
      padding: 20px;
    
}