JSFiddle - React, Tailwind, and code Playground

HTML

<table border="0" cellpadding="0" width="100%" cellspacing="0">
    <tr>
        <td width="100%">
            <div class="tabs">
                <ul>
                    
                    <li><a class="selected">TAB1</a></li>
                    <li><a HREF="javascript:changeTab('TAB1')">TAB1</a>
                    </li>
                    <li><a HREF="javascript:changeTab('TAB2')">TAB2</a>
                    </li>
                    <li><a HREF="javascript:changeTab('TAB3')">TAB3</a>
                    </li>
                    <li><a HREF="javascript:changeTab('TAB4')">TAB4</a>
                    </li>
                    <li><a HREF="javascript:changeTab('TAB5')">TAB5</a>
                    </li>
                    <li><a HREF="javascript:changeTab('TAB6')">TAB6</a>
                    </li>
                    <li><a HREF="javascript:changeTab('TAB7')">TAB7</a>
                    </li>
                    <li><a HREF="javascript:changeTab('TAB8')">TAB8</a>
                    </li>
                    <li><a HREF="javascript:changeTab('TAB9')">TAB9</a>
                    </li>
                    <li><a HREF="javascript:changeTab('TAB10')">TAB10</a>
                    </li>

                </ul>
            </div>
        </td>
    </tr>
</table>

CSS

tabs
    {
        border-bottom: 1px solid gray;
     
        margin-bottom: 1em;
    }
    
    .tabs ul
    {
        padding: 3px 0;
        margin-left: 0;
        margin-top: 1px;
        margin-bottom: 0;
        font: bold 12px Verdana, Arial, Helvetica, sans-serif;
        list-style-type: none;
        text-align: left; 
    }
    
    .tabs li
    {
        display: inline;
        margin: 0;
    }
    
    .tabs li a
    {
        text-decoration: none;
        padding: 3px 7px;
        margin-right: 3px;
        border: 1px solid #778;
        color: Blue;

    }
    
    .tabs li a:hover
    {
        text-decoration: none;
        color:#FF0000;
    }
    
    .tabs li.selected
    {
        position: relative;
        top: 1px;
        text-decoration: none;
        padding: 3px 7px;
        margin-right: 3px;
        border: 1px solid #778;
        color: #2d2b2b;

        border-bottom-color: white;
    }
    
    .tabs li.selected a:hover
    { /*selected main tab style */
        text-decoration: none;
    }