JSFiddle - React, Tailwind, and code Playground

HTML

<h3>What it looks like</h3>

<table style="width: 100%">
    <tr>
        <td>Item 1</td>
        <td>Item 2</td>
        <td>Item 3</td>
        <td>Item 4</td>
    </tr>
    <tr>
        <td>Item 1</td>
        <td>Item 2</td>
    </tr>        
</table>

<h3>What I want it to look like</h3>

<table style="width: 100%">
    <tr>
        <td>Item 1</td>
        <td>Item 2</td>
        <td>Item 3</td>
        <td>Item 4</td>
    </tr>
    <tr>
        <td>Item 1</td>
        <td>Item 2</td>
        <td> </td>
        <td> </td>
    </tr>        
</table>

CSS

tr:first-child td:nth-child(odd){
    background: #ffcccc;
}

tr:first-child td:nth-child(even){
    background: #ffaaaa;
}

tr:last-child td:nth-child(even){
    background: #aaaaff;
}

tr:last-child td:nth-child(odd){
    background: #ccccff;
}