JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <header>Title</header>
    <div role="main">
        <section>
            <div style="background:pink; height:200px;">bla bla bla</div>
            <div style="background:purple; height:200px;">bla bla bla</div>    
            <div style="background:orange; height:200px;">bla bla bla</div>                
        </section>
    </div>
    <footer>copyright</footer>
</body>

CSS

html
{
    overflow: hidden;
    height: 100%;
}

header, footer
{
    background: #72CEF2;
    padding: 9px 0;
    width: 100%;
    position: fixed;
    height: 40px;
    text-align: center;
}

header{top:0;}
footer{bottom:0;}

div[role="main"]
{
    height:400px;
    overflow-y: scroll;
    margin: 60px 0;
}

section
{
    width: 400px;
    margin: 0 auto;
}