JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<div id="container">
<div id="headerwrap">
    <div id="header">Dashboard</div>
</div>
<div id="navigationwrap">
    <div id="navigation">Navigation</div>
</div>
<div id="midcontentwrap">
    <div id="leftwrap">
        <div id="left">Left column</div>
    </div>
    <div id="midwrap">
        <div id="midleft">Midleft</div>
        <div id="midright">Midright</div>
    </div>
    <div id="rightwrap">
        <div id="right">Right column</div>
    </div>
</div>
</div>

CSS

*{font-size:12px;font-family:Helvetica;text-align:center;}
#container{width:100%;height:100%;min-height:500px;background-color:#333;}
#navigationwrap{width:100%;height:10%;min-height:40px;background-color:grey;margin:0 auto;}
#navigation{width:100%;height:5%;min-height:20px;background-color:green;margin:0 auto;}
#midcontentwrap{width:100%;height:65%;min-height:300px;background-color:silver;margin:0 auto;}
#midcontentwrap,#leftwrap,#midwrap,#midleft,#midright,#rightwrap{float:left;}
#leftwrap{width:20%;height:65%;min-height:300px;background-color:#666;}
#rightwrap{width:20%;height:65%;min-height:250px;background-color:#666;}
#midwrap{width:60%;height:65%;min-height:200px;background-color:#fff;}
#midleft{width:50%;height:65%;min-height:150px;background-color:#777;min-width:100px;}
#midright{width:50%;height:65%;min-height:150px;background-color:#888;min-width:100px;}