JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

    <header>
        <h1>Header</h1>
    </header>

    <nav>
        Menu
    </nav>

    <aside>
        Aside
    </aside>

    <section>
        Content
    </section>

    <footer>
        Footer
    </footer>

</div>

CSS

html, body {
    height:calc(100% - 100px);
}

body {
    font-family: verdana;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.container {
    position: relative;
    height: 100%;
}

header {
    width: 100%;
    height: 125px;
    padding-left: 10px;
    vertical-align: middle;
    line-height: 75px;
    background-color: red;
    overflow:auto;
}

nav {
    width: 100%;
    height: 50px;
    padding-left: 10px;
    vertical-align: middle;
    line-height: 50px;
    background-color: yellow;
}

aside {
    float: left;
    width: 200px;
    height:calc(100% - 25px);
    padding: 10px;
    background-color: blue;
}

section {
    float: right;
    padding: 10px;
    height:calc(100% - 25px);
    width: calc(100% - 200px);
    background-color: green;
}

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    padding-left: 10px;
    vertical-align: middle;
    line-height: 50px;
    background-color: orange;
}