JSFiddle - React, Tailwind, and code Playground

by George Batt

HTML

<div id="global_container">Global Container
<header>Header</header>
<div id="middle">
    <div id="left">Left</div>
    <div id="right">Right</div>
    <div id="center">
        Center
        <div id="center-middlerow">
            Center Middle Row
            <div id="page-receiver">Page Receiver</div>
            <div id="tip">Tip</div>
        </div>
        <div id="center-bottomrow">Center Bottom Row</div>
    </div>
</div>
    <footer>Footer</footer>
</div>

CSS

body{font-family:Arial;	font-size:11px; margin:0; padding:0; color:#FFF;}
#global_container{padding:5px; background:#0080ff}
header{padding:5px; background:#0066cc; margin-bottom:5px;}
#left{padding:5px; background:#0066cc; float:left; margin-right:10px; width:15%;}
#right{padding:5px; background:#0066cc; float:right; margin-left:10px; width:15%;}
#center{padding:5px; background:#0066cc; overflow:hidden; padding:5px;}
#center-middlerow, #center-bottomrow{padding:5px; background:#004080; margin-top:5px;}
footer{padding:5px; background:#0066cc; margin-top:5px;}