JSFiddle - React, Tailwind, and code Playground

HTML

<table id="rooms_table" class="rooms_highlight" cellspacing="3" cellpadding="3" border="0">
    <tbody>
        <tr style="background-color:#0081C8;color:white;">
            <td colspan="5">
                <div>Foo</div>
            </td>
        </tr>
        <tr style="border-top: 1px solid rgba(219, 219, 219, 1);">
            <td colspan="5">
                <div>Foo</div>
            </td>
        </tr>
        <tr style="background-color:none !important">
            <td colspan="5">
                <div>Foo</div>
            </td>
        </tr>
        <tr style="border-top: 1px solid rgba(219, 219, 219, 1);">
            <td colspan="5">
                <div>Foo</div>
            </td>
        </tr>
        <tr style="background-color:none !important">
            <td colspan="5">
                <div>Foo</div>
            </td>
        </tr>
        <tr style="border-top: 1px solid rgba(219, 219, 219, 1);">
            <td colspan="5">
                <div>Foo</div>
            </td>
        </tr>
        <tr style="background-color:none !important">
            <td colspan="5">
                <div>Bar</div>
            </td>
        </tr>
    </tbody>

</table>

CSS

.rooms_highlight tr:hover {background-color:#0081C8; }