JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="header"></div>
    <div id="items">
        <div class="item" id="item1"></div>
        <div class="item" id="item2"></div>
        <div class="item" id="item3"></div>
        <div class="item" id="item4"></div>
        <div class="item" id="item5"></div>
    </div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden; 
}

#container {
    display:table;
    width: 100%;
    height: 100%;
    background: red;
}

#header {
    display:table-row;
    width: 100%;
    height: 40%; /* adjust the height to see the effect */
}

#items {
    display:table-row;
    height: 100%;
}


.item {
    height: 20%;
    width: 100%;
}

#item1 {
    background: green;
}

#item2 {
    background: blue;
}

#item3 {
    background: orange;
}

#item4 {
    background: purple;
}

#item5 {
    background: brown;
}