JSFiddle - React, Tailwind, and code Playground

by Adelmo Donis

HTML

<table>
  <tr>
    <th>headline 1</th>
    <th>headline 2</th>
    <th>headline 3</th>
    <th>headline 4</th>
    <th>headline 5</th>
    <th>headline 6</th>
    <th>headline 7</th>
    <th>headline 8</th>
    <th>headline 9</th>
    <th>headline 10</th>
    <th>headline 11</th>
    <th>headline 12</th>
  </tr>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
    <td>column 4</td>
    <td>column 5</td>
    <td>column 6</td>
    <td>column 7</td>
    <td>column 8</td>
    <td>column 9</td>
    <td>column 10</td>
    <td>column 11</td>
    <td>column 12</td>
  </tr>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
    <td>column 4</td>
    <td>column 5</td>
    <td>column 6</td>
    <td>column 7</td>
    <td>column 8</td>
    <td>column 9</td>
    <td>column 10</td>
    <td>column 11</td>
    <td>column 12</td>
  </tr>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
    <td>column 4</td>
    <td>column 5</td>
    <td>column 6</td>
    <td>column 7</td>
    <td>column 8</td>
    <td>column 9</td>
    <td>column 10</td>
    <td>column 11</td>
    <td>column 12</td>
  </tr>
</table>

CSS

tr td:nth-child(2),
tr td:nth-child(3) {
  background: red;
}
tr td:nth-child(5),
tr td:nth-child(6),
tr td:nth-child(7),
tr td:nth-child(8) {
  background: orange;
}
tr td:nth-child(10),
tr td:nth-child(11),
tr td:nth-child(12) {
  background: green;
}