JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <header>Title</header>
    <div role="main">
        <section>
Hello<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />World!
        </section>
    </div>
    <footer>copyright</footer>
</body>

CSS

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

body
{
    padding: 60px 0px;
    height: 100%;
    box-sizing: border-box;
}

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"]
{
    overflow-y: scroll;
    height: 100%;
}

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