JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="mainWrapper">
        <div class="mainHeader">
            header
        </div>
        <div class="mainNav">
            nav
        </div>
        <div class="mainContent">
            text
        </div>
    </div>
</body>

CSS

html{
    height: 100%;
}
body {
    background-color: #69a8ca;
    background-repeat: no-repeat;
    background-position: 0 100%;
    margin-top: 2px;
    margin-bottom: 2px;
    height:99%;
}

.mainWrapper{
    height:100%;
}
.mainNav, .mainContent{
    height: 100%;
    margin-top: 5px;
}

.mainHeader{
   display:block;
   text-align:center;
   height: 150px;
   background:red;
}

.mainNav{
    float:left;
    width: 100px;
    background: blue;
}

.mainContent{
    background: green;
}