JSFiddle - React, Tailwind, and code Playground

by Malik Naik

HTML

<table>
    <tbody class="ColorRed">
        <tr>
            <td>red</td>
        </tr>
    </tbody>
    <tbody class="test ">
        <tr>
            <td>test</td>
        </tr>
    </tbody>
    <tbody class="test ">
        <tr>
            <td>test red</td>
        </tr>
    </tbody>
    <tbody class="ColorBlue">
        <tr>
            <td>blue</td>
        </tr>
    </tbody>
    <tbody class="test ">
        <tr>
            <td>≡</td>
        </tr>
    </tbody>
    <tbody class="test ">
        <tr>
            <td>test blue</td>
        </tr>
    </tbody><tbody class="ColorRed">
        <tr>
            <td>red</td>
        </tr>
    </tbody>
    <tbody class="test ">
        <tr>
            <td>test</td>
        </tr>
    </tbody>
    <tbody class="test ">
        <tr>
            <td>test red</td>
        </tr>
    </tbody>
</table>

CSS

.ColorRed,.ColorRed + tbody.test {
    background: red;
}
.ColorBlue,.ColorBlue + tbody.test {
    background: blue;
}
.ColorRed,.ColorRed + tbody.test + tbody.test{
    background: red;
}
.ColorBlue,.ColorBlue + tbody.test + tbody.test{
    background: blue;
}