JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left pane">
    <div class="pane left-top">Top</div>
    <div class="pane left-fill fill">
        <div class="pane left-middle fill">
            <h1>Middle</h1>
            <p>Text</p>
            <p>Text</p>
            <p>Text</p>
            <p>Text</p>
            <p>Text</p>
            <p>Text</p>
        </div>
        <div class="pane left-bottom">
            <div class="inner-left pane">
                <div class="pane inner-left-top">Inner Top</div>
                <div class="pane inner-left-middle fill">
                    <h1>Inner Middle</h1>
                    <p>Text</p>
                    <p>Text</p>
                    <p>Text</p>
                    <p>Text</p>
                    <p>Text</p>
                    <p>Text</p>
                    <p>Text</p>
                </div>
                <div class="pane inner-left-bottom">Inner Bottom</div>
            </div>
        </div>
    </div>
</div>
<div class="center pane">
    <div class="pane center-top">Top</div>
    <div class="pane center-middle">Middle</div>
    <div class="pane center-bottom fill">
        <h1>Bottom</h1>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
    </div>
</div>
<div class="right pane">
    <div class="pane right-top fill">
        <h1>Top</h1>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
    </div>
    <div class="pane right-middle">Middle</div>
    <div class="pane right-bottom">Bottom</div>
</div>

CSS

body, html {
    height:100%;
    margin:0;
    padding:0;
}
div {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
h1 {
    font-weight:bold;
}
.pane {
    position:absolute;
    width:100%;
    overflow:hidden;
    padding:15px;
}
.left, .center, .right, .inner-left {
    width:33.33333333%;
    min-height:100%;
    height:auto;
    top:0;
    padding:0;
}
.fill {
    height:auto;
    overflow:auto;
}
.left {
    left:0;
}
.left-top {
    background:pink;
    height: 15%;
    top:0;
}
.left-fill {
    padding:0;
    top:15%;
    bottom:0;
}
.left-middle {
    background:red;
    top:0;
    bottom:50%;
}
.left-bottom {
    background:orange;
    height: 50%;
    bottom:0;
}
.inner-left {
    left:0;
    width:100%;
}
.inner-left-top {
    background:pink;
    height: 50px;
    top:0;
}
.inner-left-middle {
    background:red;
    top:50px;
    bottom:50px;
}
.inner-left-bottom {
    background:orange;
    height: 50px;
    bottom:0;
}
.center {
    left:33.33333333%;
}
.center-top {
    background:teal;
    height: 100px;
    top:0;
}
.center-middle {
    background:blue;
    height: 60px;
    top:100px;
}
.center-bottom {
    background:purple;
    top:160px;
    bottom: 0px;
}
.right {
    left:66.66666666%;
}
.right-top {
    background:lime;
    top:0;
    bottom:160px;
}
.right-middle {
    background:green;
    height: 100px;
    bottom:60px;
}
.right-bottom {
    background:darkgreen;
    height: 60px;
    bottom:0;
}