JSFiddle - React, Tailwind, and code Playground

HTML

<div class="middle">
    <div class="top">top</div>middle
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>middle
    <div class="bottom">bottom</div>
</div>

CSS

html, body {
    height:100%;
}
.top, .bottom {
    position:absolute;
    top:0px;
    width:100%;
    height:100px;
    background:#6D6DC0;
}
.bottom {
    top: auto;
    bottom:0px;
}
.middle {
    position:relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 100%;
    padding: 100px 0;
    width:100%;
    background:#b00;
}