JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table">
<thead>
  <tr>
    <td></td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td></td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</thead>
<tbody>
  <tr>
    <td>A</td>
    <td style="background-color:red;"></td>
    <td></td>
    <td></td>
    <td></td>
    <td style="background-color:red;"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>B</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td style="background-color:red;"></td>
    <td></td>
  </tr>
  <tr>
    <td>C</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>D</td>
    <td></td>
    <td></td>
    <td style="background-color:blue;"></td>
    <td></td>
    <td></td>
    <td></td>
    <td style="background-color:blue;"></td>
  </tr>
</tbody>
</table>

CSS

.table tbody tr td:not(:first-child) {
  border: 1px solid blue;
  width: 1em;
  height:1em;
}

.table tbody tr td:first-child {
  font-weight:bold;
}

.table tr td:4th-child {
  margin-right;2em;
}

.table {
  border-spacing: 3em;
}