JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>
CSS
table {
width: 500px;
}
table td { /* style for all the cells between the top and bottom row */
background: red;
}
table tr:first-child td { /* style for the cells in the top row */
background: green;
}
table tr:last-child td { /* style for the cells in the bottom row */
background: gray;
}
table tr:first-child td:first-child, /* first row, first cell */
table tr:first-child td:last-child, /* first row, last cell */
table tr:last-child td:first-child, /* last row, first cell */
table tr:last-child td:last-child { /* last row, last cell */
background: yellow;
}