JSFiddle - React, Tailwind, and code Playground

by rbyers

HTML

<div id='container'>
    <div id='top-section' class='section'>
        <span>Top title</span>
        <div class='contents'>
            One<br>Two<br>Three<br>Four<br>Five<br>
        </div>
    </div>
    <div id='middle-section' class='section'>
        <span>Middle title</span>
        <div class='contents'>
            One<br>Two<br>Three<br>Four<br>Five<br>
        </div>
    </div>
    <div id='bottom-section' class='section'>
        <span>Bottom title</span>
        <div class='contents'>
            One<br>Two<br>Three<br>Four<br>Five<br>
        </div>
    </div>
</div>

CSS

#container {
    position: absolute;
    height: 100%;
    width: 100%;        
}

.section {
    position: relative;   
    width: 100%;
}


.contents {
    overflow: scroll;
}

#top-section {
    height: 25%;
}
#middle-section {
    height: 50%;
}
#bottom-section {
    bottom: 0;
}