JSFiddle - React, Tailwind, and code Playground

HTML

<div id="panel">
        <div id="top"></div>
        <div id="middle"></div>
        <div id="bottom"></div>
        <div id="content">
            Lorem ipsum, etc...             Lorem ipsum, etc...            Lorem ipsum, etc...            Lorem ipsum, etc...            Lorem ipsum, etc...            Lorem ipsum, etc...            Lorem ipsum, etc...            Lorem ipsum, etc...            Lorem ipsum, etc...            Lorem ipsum, etc...            Lorem ipsum, etc...            Lorem ipsum, etc...            Lorem ipsum, etc...            Lorem ips
        </div>
    </div>

CSS

#panel {
        height: 400px;
        width: 300px;
        position: relative;
    }
    
    #top,
    #middle,
    #bottom {
        left: 0;
        position: absolute;
        width: 100%;
    }
    
    #top {
        height: 100px;
        background: pink;
        top: 0;
    }
    
    #middle {
        bottom: 100px;
        top: 100px;
        background: blue;
    }
    
    #bottom {
        bottom: 0;
        height: 100px;
        background: pink;
    }
    
    #content {
    /* any padding or anything */
        position: relative;
    height: 400px;
    }