JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <div id="top">row 1</div>
        <div id="middle">row 2</div>
        <div id="bottom">row 3</div>
    </body>
</html>

CSS

html, body
{
    height: 100%;
}
div {
    border-style:solid;
    border-width:1px;
}
div#top { height:20%; }
div#middle {height: 60%; }
div#bottom {height: 20%; }