JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<table>
  <tr>
    <td><span>a8</span>&#9820;</td>
    <td><span>b8</span>&#9822;</td>
    <td><span>c8</span>&#9821;</td>
    <td><span>e8</span>&#9819;</td>
    <td><span>d8</span>&#9818;</td>
    <td><span>f8</span>&#9821;</td>
    <td><span>g8</span>&#9822;</td>
    <td><span>h8</span>&#9820;</td>
  </tr>
  <tr>
    <td><span>a7</span>&#9823;</td>
    <td><span>b7</span>&#9823;</td>
    <td><span>c7</span>&#9823;</td>
    <td><span>d7</span>&#9823;</td>
    <td><span>e7</span>&#9823;</td>
    <td><span>f8</span>&#9823;</td>
    <td><span>g7</span>&#9823;</td>
    <td><span>h7</span>&#9823;</td>
  </tr>
  <tr>
    <td><span>a6</span>&nbsp;
    </td>
    <td><span>b6</span>&nbsp;
    </td>
    <td><span>c6</span>&nbsp;
    </td>
    <td><span>d6</span>&nbsp;
    </td>
    <td><span>e6</span>&nbsp;
    </td>
    <td><span>f6</span>&nbsp;
    </td>
    <td><span>g6</span>&nbsp;
    </td>
    <td><span>h6</span>&nbsp;
    </td>
  </tr>
  <tr>
    <td><span>a5</span>&nbsp;
    </td>
    <td><span>b5</span>&nbsp;
    </td>
    <td><span>c5</span>&nbsp;
    </td>
    <td><span>d5</span>&nbsp;
    </td>
    <td><span>e5</span>&nbsp;
    </td>
    <td><span>f5</span>&nbsp;
    </td>
    <td><span>g5</span>&nbsp;
    </td>
    <td><span>h5</span>&nbsp;
    </td>
  </tr>
  <tr>
    <td><span>a4</span>&nbsp;
    </td>
    <td><span>b4</span>&nbsp;
    </td>
    <td><span>c4</span>&nbsp;
    </td>
    <td><span>d4</span>&nbsp;
    </td>
    <td><span>e4</span>&nbsp;
    </td>
    <td><span>f4</span>&nbsp;
    </td>
    <td><span>g4</span>&nbsp;
    </td>
    <td><span>h4</span>&nbsp;
    </td>
  </tr>
  <tr>
    <td><span>a3</span>&nbsp;
    </td>
    <td><span>b3</span>&nbsp;
    </td>
    <td><span>c3</span>&nbsp;
    </td>
    <td><span>d3</span>&nbsp;
    </td>
    <td><span>e3</span>&nbsp;
    </td>
    <td><span>f3</span>&nbsp;
    </td>
    <td><span>g3</span>&nbsp;
    </td>
    <td><span>h3</span>&nbsp;
    </td>
  </tr>
  <tr>
    <td><span>a2</span>&#9817;</td>
...

CSS

body {
  background: #ccc;
  font: 16px tahoma, sans-serif;
}

table td {
  width: 50px;
  height: 50px;
  background: #fff;
  position: relative;
  font-size: 5em;
  line-height: 100px;
  text-align: center;
}

table td span {
  content: "foo";
  position: absolute;
  top: 5px;
  left: 5px;
  color: #888;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 1em;
}

table tr td:nth-child(2n) {
  background: #aaa;
}

table tr:nth-child(2n) td:nth-child(2n) {
  background: #fff;
}

table tr:nth-child(2n) td:nth-child(2n+1) {
  background: #aaa;
}