JSFiddle - React, Tailwind, and code Playground

by Jacktea

HTML

<!-- Background -->
<div id="bg"></div>
<div id="one" class="size"></div>
<div id="two" class="size"></div>
<div id="three" class="size"></div>
<div id="four" class="size"></div>
<div id="five" class="size"></div>
<div id="six" class="size"></div>
<div id="seven" class="size"></div>

CSS

.size{
    width: 200px;
    height: 149px;
    position: absolute;
}
#bg {
    position: absolute;
    height: 500px;
    width: 800px;
    background: yellow;
    z-index: 0;
}
#one {
    background:pink;
    z-index: 10;
}
#two {
    left: 210px;
    background:white;
    z-index: 10;
    opacity:.8;
}
#three {
    left: 412px;
    background:yellow;
    z-index: 10;
}
#four {
    top:159px;
    background:red;
    z-index: 10;
    opacity:1;
}
#five {
    top:159px;
    left: 210px;
    background:white;
    z-index: 10;
    opacity:1;
}
#six {
    top:159px;
    left: 412px;
    background:red;
    z-index: 10;
    opacity:.1;
}
#seven {
    top:310px;
    left: 412px;
    background:#99ffff;
    z-index: 10;
}