JSFiddle - React, Tailwind, and code Playground

by Yasin Yoruk

HTML

<table border="0" width="100%" cellpadding="0" cellspacing="0" id="product-table" class="nohover">
<tr>
	<th colspan="9" class="table-header-repeat">TEST DATA</th>
</tr>
<tbody>
<tr >
	<td>123456</td>
    <td>123456</td>
    <td>96321</td>
    <td>ABC</td>

</tr>
<tr >
	<td>123456</td>
    <td>123456</td>
    <td>963217</td>
    <td>XYZ</td>
</tr>
<tr >
	<td>123456</td>
    <td>123456</td>
    <td>753652</td>
    <td>KLM</td>
</tr>
<tr class="green_bg">
	<td>8521</td>
    <td>1235</td>
    <td>1122</td>
    <td>ADEKA</td>
</tr>
<tr class="green_bg">
	<td>8963</td>
    <td>7536</td>
    <td>2233</td>
    <td>ABDI</td>
</tr>
</tbody>
</table>

CSS

#product-table > tbody > tr { cursor:pointer; }
#product-table > tbody > tr:hover { background:#eee; }

.nohover > tbody > tr { cursor:default !important; }
.nohover > tbody > tr:hover { background:#fff !important; }

.green_bg { background-color:#090; }