JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <!--profile-->
    <tr>
        <td colspan="3">profile</td>
    </tr>
    <!--tabs 2 rows-->
    <!--row 1-->
    <tr class="tab_links">
        <td class="active"><a href="#tab1">tab1</a></td>
        <td class="abc"><a href="#tab2">tab2</a></td>
        <td><a href="#tab3">tab3</a></td>
    </tr>
    <!--row 2-->
    <tr class="tab_links">
        <td><a href="#tab4">tab4ddd</a></td>
        <td><a href="#tab5">tab5</a></td>
        <td><a href="#tab6">tab6</a></td>
    </tr>
    <!--detail of tab-->
    <tr>
        <td colspan="3">detail of tab</td>
    </tr>
</table>

CSS

.tab_links td {
    background:#7fb5da;
}

.abc td {
    background:#ff0000;
  
}