JSFiddle - React, Tailwind, and code Playground

by Dan Mathisen

HTML

<div class="gridcontainer">
    <div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div>
</div>

CSS

.gridcontainer
{
    width: 80px;
    line-height: 0;
}

.griditem
{
    display: inline-block;            
    border: solid black;
    border-width: 0 0 1px 1px;
    width: 18px;
    height: 18px;
}
.griditem:nth-child(4n) {
    border-right-width: 1px;
}
.griditem:nth-child(-n+4) {
    border-top-width: 1px;
}