JSFiddle - React, Tailwind, and code Playground
HTML
<nav></nav>
<div class="hero">
</div>
<div id="cellbox">
<div class="half-cell" id="i1"></div>
<div class="quarter-cell-horiz" id="i2"></div>
<div class="quarter-cell-horiz" id="i3"></div>
<div class="half-cell" id="i4"></div>
<div class="quarter-cell-vert" id="i5"></div>
<div class="quarter-cell-vert" id="i6"></div>
<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 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:70%;
width:50%;
background-color: #458bff;
float: left;
display:inline;
background-size:cover;
}
.quarter-cell-horiz {
height:35%;
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:70%;
width:25%;
...