JSFiddle - React, Tailwind, and code Playground

by ZenMaster

HTML

<div class="grid-block" id="header"></div>
<div id="wrapper">
    <div class="grid-block" id="main"></div>
    <div class="grid-block" id="complementary"></div>
    <div class="grid-block" id="aside"></div>
</div>
<div class="grid-block" id="contentinfo"></div>

CSS

body {
    margin:auto;            /* you'll see why later */
    text-align:center;      /* to center align grid boxes */
    letter-spacing: -0.31em;/* webkit: collapse white-space between units */
    *letter-spacing: normal;/* reset IE < 8 */
    word-spacing: -0.43em;  /* IE < 8 && gecko: collapse white-space between units */
}
.grid-block {
    letter-spacing: normal; /* reset */
    word-spacing: normal;   /* reset */
    text-align:left;        /* reset */
    display:inline-block;   /* styling all grid-wrapper as inline blocks */
    vertical-align:top;     /* aligning those boxes at the top */
    *display:inline;        /* IE hack to mimic inline-block */
    zoom:1;                 /* part of the above hack for IE */
    width:100%;             /* boxes would shrink-wrap */
}

/**
 * rules below are meant to paint the boxes
 */

.grid-block {
    height: 150px;
}
#header {
    background: #d6cac1;
}
#main {
    background: #ad9684;
}
#complementary {
    background: #7a6351;
}
#aside {
    background: #000000;
}
#contentinfo {
    background: #3d3128;
}