JSFiddle - React, Tailwind, and code Playground

HTML

<table cellspacing="0" cellpadding="0" width="100%">
    <thead>
        <tr>
            <th>&nbsp;</th>
            <th>Unit Head</th>
            <th>Column Head</th>
            <th>Column Head</th>
            <th>Column Head</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th rowspan="2">Row head</th>
            <th>unit</th>
            <td>data</td>
            <td>data</td>
            <td>data</td>

        </tr>
        <tr>
            <th>unit</th>
            <td>data</td>
            <td>data</td>
            <td>data</td>
           </tr>
         <tr>
            <th rowspan="2">Row head</th>
            <th>unit</th>
            <td>data</td>
            <td>data</td>
            <td>data</td>

        </tr>
        <tr>
            <th>unit</th>
            <td>data</td>
            <td>data</td>
            <td>data</td>
           </tr>
          <tr>
            <th rowspan="2">Row head</th>
            <th>unit</th>
            <td>data</td>
            <td>data</td>
            <td>data</td>

        </tr>
        <tr>
            <th>unit</th>
            <td>data</td>
            <td>data</td>
            <td>data</td>
           </tr>
          <tr>
            <th rowspan="2">Row head</th>
            <th>unit</th>
            <td>data</td>
            <td>data</td>
            <td>data</td>

        </tr>
        <tr>
            <th>unit</th>
            <td>data</td>
            <td>data</td>
            <td>data</td>
           </tr>
          <tr>
            <th rowspan="2">Row head</th>
            <th>unit</th>
            <td>data</td>
            <td>data</td>
            <td>data</td>

        </tr>
        <tr>
            <th>unit</th>
            <td>data</td>
            <td>data</td>
            <td>data</td>
           </tr>
    </tbody>
</table>

CSS

img.sizeChartBrandLogo{ padding-right:30px; float:left; height:50px; border-right:1px solid #ccc;}
    strong{ font-size:25px; color:#0088DD; float:left; margin:10px 0 0 18px;}
    table{ clear:both; margin-top:15px; border-top:1px solid #ccc; border-left:1px solid #ccc;}
    thead th{ text-align:center; background:#eee; padding:3px 5px; color:#555; font-size:13px; border-right:1px solid #ccc; border-bottom:1px solid #ccc;}
    tbody th{ text-align:left; background:#eee;  padding:3px 5px; color:#555; width:15%; font-size:13px; border-right:1px solid #ccc; border-bottom:1px solid #ccc;}
td{ text-align:center; padding:5px; font-size:12px; border-right:1px solid #ccc; border-bottom:1px solid #ccc;}


/* these styles are in question i want to group/style each set of 2 in a row head  */
tbody tr:nth-child(3n+1){background:#f7f7f7;}
tbody tr:nth-child(odd){background:#f7f7f7;}