JSFiddle - React, Tailwind, and code Playground

HTML

<!-- zero row --> 
<div class="l fill space ts rs bs ls"></div>
<div class="  fill space ts rs bs ls"></div>
<div class="  fill space ts rs bs ls"></div>
<div class="  fill space ts rs bs ls"></div>
<div class="  fill space ts rs bs ls"></div>
<div class="  fill space ts rs bs ls"></div>
<div class="  fill space ts rs bl ls"></div>
<div class="  fill space ts rs bs ls"></div>
<div class="  fill space ts rs bs ls"></div>
<div class="  fill space ts rs bs ls"></div>

<!-- first row -->
<div class="l space ts rs bs ls"></div>
<div class="      space ts rs bs ls"></div>
<div class="      space ts rl bs ls"></div>
<div class="      bug   tl rl bl ll"></div>
<div class="      space ts rs bl ll"></div>
<div class="      space ts rs bs ls"></div>
<div class="      space ts rs bs ls"></div>
<div class="      space ts rs bs ls"></div>
<div class="      space ts rl bl ls"></div>
<div class="      bug   tl rl bl ll"></div>
<div class="      space ts rs bs ll"></div>
<div class="      space ts rs bs ls"></div>
<div class="      space ts rs bs ls"></div>

  <!-- second row -->
<div class="l space ts rs bs ls"></div>
<div class="      space ts rs bs ls"></div>
<div class="      space ts rs bs ls"></div>
<div class="      space tl rl bl ls"></div>
<div class="      bug   tl rl bl ll"></div>
<div class="      space ts rs bl ll"></div>
<div class="      space ts rs bl ls"></div>
<div class="      space ts rl bl ls"></div>
<div class="      bug   tl rl bl ll"></div>
<div class="      space tl rs bl ll"></div>
<div class="      space ts rs bs ls"></div>
<div class="      space ts rs bs ls"></div>
<div class="      space ts rs bs ls"></div>
  
<!-- third row -->
<div class="l space ts rs bs ls"></div>
<div class="      space ts rs bs ls"></div>
<div class="      space ts rl bl ls"></div>
<div class="      bug   tl rl bl ll"></div>
<div class="      bug   tl rl bl ll"></div>
<div class="      bug   tl rl bl ll"></div>
<div class="      bug   tl rl bl ll"></div>
<div class="      bug  ...

CSS

body {background-color:white;}
div {float:left; width:30px; height:30px;}
div.l {clear:left; width:5px;}
div.fill {height:5px;}
div.space {background:white;}
div.bug {background:lightgreen;}
div.rs {border-right:1px solid white;}
div.bs {border-bottom:1px solid white;}
div.ls {border-left:1px solid white;}
div.tl {border-top:1px solid black;}
div.rl {border-right:1px solid black;}
div.bl {border-bottom:1px solid black;}
div.ll {border-left:1px solid black;}