JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<table border='1'>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

CSS

td {
  padding: 5px;
}
td:nth-of-type(-n+6) {
  background-color: red;
}
td:nth-of-type( n + 7){
  background-color: blue !important;
}
td:nth-of-type(n+13):nth-of-type(-n+18) {
  background-color: green;
}
td:nth-of-type(n+19):nth-of-type(-n+24) {
  background-color: yellow;
}
td:nth-of-type(n+25):nth-of-type(-n+30) {
  background-color: magenta;
}
td:nth-of-type(n+31):nth-of-type(-n+36) {
  background-color: blue;
}
td:nth-of-type(n+37):nth-of-type(-n+42) {
  background-color: green;
}
td:nth-of-type(n+43):nth-of-type(-n+48) {
  background-color: yellow;
}
td:nth-of-type(n+49):nth-of-type(-n+54) {
  background-color: magenta;
}
td:nth-of-type(n+55):nth-of-type(-n+60) {
  background-color: blue;
}
td:nth-of-type(n+61):nth-of-type(-n+66) {
  background-color: green;
}
td:nth-of-type(n+67):nth-of-type(-n+72) {
  background-color: yellow;
}
td:nth-of-type(n+73):nth-of-type(-n+78) {
  background-color: magenta;
}