JSFiddle - React, Tailwind, and code Playground

by srhcan

HTML

<table border="0" cellspacing="0" bgcolor="#CCCCCC" cellpadding="0">
    <tr>
        <td bgcolor="#FFCC00" WIDTH="100"><b>Brand</b>

        </td>
        <td bgcolor="#FFCC00" WIDTH="100"><b>Dimensions</b>

        </td>
        <td bgcolor="#FFCC00" WIDTH="100"><b>Price</b>

        </td>
        <td bgcolor="#FFCC00" WIDTH="100"><b>Size</b>

        </td>
        <td bgcolor="#FFCC00" WIDTH="100"><b>Color</b>

        </td>
        <td bgcolor="#FFCC00" WIDTH="100"><b>&nbsp;Type</b>

        </td>
        <td bgcolor="#FFCC00" WIDTH="100"><b>Comment</b>

        </td>
    </tr>
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
        <td>Row A</td>
        <td>200x300</td>
        <td>$200,000.00</td>
        <td>small</td>
        <td>white&nbsp;</td>
        <td>good</td>
        <td>2 doors</td>
    </tr>
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
        <td>Row B</td>
        <td>256x1000</td>
        <td>$232,300.00</td>
        <td>large</td>
        <td>yellow&nbsp;</td>
        <td>good</td>
        <td>nice</td>
    </tr>
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
        <td>Row 3</td>
        <td>543x300</td>
        <td>$122,111.00</td>
        <td>medium</td>
        <td>yellow&nbsp;</td>
        <td>good</td>
        <td>expensive</td>
    </tr>
</table>

CSS

<STYLE> <!-- tr {
    background-color: #DDDDDD
}
.initial {
    background-color: #DDDDDD;
    color:#000000
}
.normal {
    background-color: #CCCCCC
}
.highlight {
    background-color: #8888FF
}
//--> </style>