JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thbody>
        <tr class="red">
            <td>some data</td>
        </tr>
        <tr>
            <td class="blue">some data</td>
        </tr>
        <tr>
            <td class="yellow">some data</td>
        </tr>
        <tr>
            <td class="green">some data</td>
        </tr>
        <tr class="red">
            <td>some data</td>
        </tr>
        <tr>
            <td class="blue">some data</td>
        </tr>
        <tr>
            <td class="yellow">some data</td>
        </tr>
        <tr>
            <td class="green">some data</td>
        </tr>
    </thbody>
</table>

CSS

.red {
    background: #FF4F4F;
}
.blue {
    background: #756EFF;
}
.yellow {
    background: #F9FF82;
}
.green {
    background: #91FF82;
}


/* This is just to make the tables look more like tables.
   You don't need to copy this part.
*/
table {
    width: 500px;
}
tr {
    width: 500px;
}
td {
    padding: 8px;
}