JSFiddle - React, Tailwind, and code Playground
HTML
<div style="position:relative">
<div class="cell " style="left: 20px; top: 20px;"> </div>
<div class="cell on" style="left: 20px; top: 40px;"> </div>
<div class="cell " style="left: 20px; top: 60px;"> </div>
<div class="cell " style="left: 20px; top: 80px;"> </div>
<div class="cell " style="left: 20px; top: 100px;"> </div>
<div class="cell " style="left: 20px; top: 120px;"> </div>
<div class="cell " style="left: 20px; top: 140px;"> </div>
<div class="cell " style="left: 20px; top: 160px;"> </div>
<div class="cell " style="left: 20px; top: 180px;"> </div>
<div class="cell " style="left: 20px; top: 200px;"> </div>
<div class="cell " style="left: 20px; top: 220px;"> </div>
<div class="cell " style="left: 20px; top: 240px;"> </div>
<div class="cell " style="left: 20px; top: 260px;"> </div>
<div class="cell " style="left: 20px; top: 280px;"> </div>
<div class="cell " style="left: 20px; top: 300px;"> </div>
<div class="cell " style="left: 20px; top: 320px;"> </div>
<div class="cell " style="left: 20px; top: 340px;"> </div>
<div class="cell on" style="left: 40px; top: 20px;"> </div>
<div class="cell " style="left: 40px; top: 40px;"> </div>
<div class="cell " style="left: 40px; top: 60px;"> </div>
<div class="cell " style="left: 40px; top: 80px;"> </div>
<div class="cell " style="left: 40px; top: 100px;"> </div>
<div class="cell " style="left: 40px; top: 120px;"> </div>
<div class="cell " style="left: 40px; top: 140px;"> </div>
<div class="cell " style="left: 40px; top: 160px;"> </div>
<div class="cell " style="left: 40px; top: 180px;"> </div>
<div class="cell " style="left: 40px; top: 200px;"> </div>
<div class="cell " style="left: 40px; top: 220px;"> </div>
<div class="cell " style="left: 40px; top: 240px;"> </div>
<div class="cell " style="left: 40px; top: 260px;"> </div>
<div class="cell " style="left: 40px; top:...
CSS
.cell {
border: 2px solid black;
width: 18px;
height: 18px;
position: absolute;
}
.on {
background-color: #999;
}