JSFiddle - React, Tailwind, and code Playground

by Imran Bughio

HTML

<nav></nav>
<div class="hero"></div>
<div id="cellbox">
    <div class="vertical-row">
        <div class="half-cell" id="i1"></div>
        <div class="quarter-cell-horiz" id="i2"></div>
        <div class="quarter-cell-horiz" id="i3"></div>
    </div>
    <div class="vertical-row">
        <div class="half-cell" id="i4"></div>
        <div class="quarter-cell-vert" id="i5"></div>
        <div class="quarter-cell-vert" id="i6"></div>
    </div>
    <div class="vertical-row">
        <div class="quarter-cell-vert" id="i7"></div>
        <div class="quarter-cell-vert" id="i8"></div>
        <div class="quarter-cell-horiz" id="i9"></div>
        <div class="quarter-cell-horiz" id="i10"></div>
    </div>
    <div class="full"></div>
</div>

CSS

body {
        width:100%;
    }
    nav {
        height:50px;
        width:100%;
        position: fixed;
        top:0;
        z-index: 99;
        background-color:#fff;
        -webkit-box-shadow: 0px 0px 28px 0px rgba(50, 50, 50, 0.25);
        -moz-box-shadow: 0px 0px 28px 0px rgba(50, 50, 50, 0.25);
        box-shadow: 0px 0px 28px 0px rgba(50, 50, 50, 0.25);
    }
    .hero {
        height: 80%;
        min-height:500px;
        width: 100%;
        background-color:#ff5f85;
        position: fixed;
        z-index: 0;
    }
    #cellbox {
        width:100%;
        height: 100%;
        position: absolute;
        top:80%;
    }
    .half-cell {
        height:100%;
        width:50%;
        background-color: #458bff;
        float: left;
        display:inline;
        background-size:cover;
    }
    .quarter-cell-horiz {
        height:50%;
        width:50%;
        float: left;
        display:inline;
        background-color:#373737;
    }
    #i2 {
        background-color: #45ff8f;
    }
    #i3 {
        background-color:#32e479;
    }
    #i4 {
        background-color: #659cf8;
    }
    .quarter-cell-vert {
        height:100%;
        width:25%;
        float: left;
        display:inline;
    }
    #i5 {
        background-color:#f8ff8e;
    }
    #i6 {
        background-color:#ecf915;
    }
    #i7 {
        background-color:#f8ff8e;
    }
    #i8 {
        background-color:#ecf915;
    }
    #i9 {
        background-color: #45ff8f;
    }
    #i10 {
        background-color:#32e479;
    }
    html, body {
        height: 100%;
    }
    .vertical-row {
        height: 100%;
    }