JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper">
<div id="grid">
<div class="block s2x1 p0x0"></div><div class="block s1x2 p3x0"></div><div class="block s1x1 p2x0"></div><div class="block s2x2 p1x1"></div><div class="block s1x1 p3x2"></div><div class="block s1x2 p0x1"></div>
</div>
</div>
<span class="creditline">Grid Builder by Dubberly Design Office</span>
CSS
/* Main Containers */
body {
margin: 0;
}
#wrapper {
width: 960px;
}
#grid {
float: left;
width: 960px;
margin: 0;
padding: 0;
background: white;
}
.block {
position: absolute;
border: 1px solid black;
}
.inner {
height: 100%;
width: 100%;
}
.s1x1 {
height: 240px;
width: 240px;
}
.s2x1 {
height: 240px;
width: 480px;
}
.s3x1 {
height: 240px;
width: 720px;
}
.s4x1 {
height: 240px;
width: 960px;
}
.s1x2 {
height: 480px;
width: 240px;
}
.s2x2 {
height:...