JSFiddle - React, Tailwind, and code Playground

HTML

<div id="globalcontainer">
    <div id="header">#header</div>
    <div id="middle">
        <div id="left">#left
            <div class="bloc">.bloc</div>
            <div class="bloc">.bloc</div>
            <div class="bloc">.bloc</div>
        </div>
        <div id="center">
            <div id="center-middlerow">
                <div id="pageReceiver">
                    <div id="page">
                        <div id="pageHeader">
                            #pageHeader
                        </div>
                        <div id="pageContent">
                            #pageContent
                        </div>
                        <div id="pageFooter">
                            #pageFooter
                        </div>
                    </div>
                </div>
                <div id="tip">#tip</div>
            </div>
            <div id="center-bottomrow">
                #center-bottomrow
            </div>
        </div>
        <div id="right">#right
            <div class="bloc">.bloc</div>
            <div class="bloc">.bloc</div>
            <div class="bloc">.bloc</div>            
        </div>
    </div>
    <div id="footer">#footer</div>
</div>

CSS

html, body { margin:0; padding: 0; height: 100%; width: 100%; overflow: hidden; font-size: 9px; }
div { border: 1px solid blue; box-sizing: border-box; padding: 2px; margin: 4px; }
#globalcontainer { width: 99%; height: 98%; background-color: #deebf7; }
#header { height: 5%; background-color: #d1e4f3; }
#middle { height: 86%; background-color: #d1e4f3; display: table; border-spacing: 4px; width: 99%; }
#footer { height: 5%; background-color: #d1e4f3; }
#left, #center, #right { display: table-cell; background-color: #c4ddf1; }
#left { width: 14%; }
#center { width: 68%; }
#right {  width: 14%; }
#center-middlerow { height: 80%; background-color: #bad5eb; }
#center-bottomrow { height: 20%; background-color: #bad5eb; }
#pageReceiver { height: 78%; background-color: #b1d0ec; }
#tip { height: 16%; background-color: #b1d0ec; }
#page { height: 95%; background-color: #a7cbe9; }
#pageHeader { height: 14%; background-color: #2e75b5; }
#pageContent { height: 62%; background-color: #2e75b5; }
#pageFooter { height: 14%; background-color: #2e75b5; }
.bloc { height: 20%; background-color: #2e75b5; }
#left > .bloc:nth-child(1), #right > .bloc:nth-child(1) { width: 50%; }
#left > .bloc:nth-child(2), #right > .bloc:nth-child(2) { width: 70%; }