JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabstrip">
        <div class="tabbaseline"></div>
            <ul>
                <li>One</li>
                <li>Two</li>
                <li>Threeaaaaaaaaaaaaaa</li>
                <li>Four</li>
                <li>Five</li>
            </ul>
        </div>
    </div>

CSS

* {
    margin: 0;
    padding: 0;    
}

.tabstrip {
    overflow: hidden !important;
    background-color: #ffffff;
    padding: 3px 0px;
    padding-bottom: 0px !important;
    position: relative;
    height: 2.5rem;
}

.tabbaseline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: 1px solid silver;
}

.tabstrip ul {
    border-collapse: separate;
    border-spacing: 4px 0px;
    position: absolute;
    bottom: 0;
    right: 0;
    border-bottom: 1px solid silver;
    padding: 0px 7px;
}

.tabstrip li {
    margin-right: 1px;
    display: inline-block;
    cursor: pointer;   
    padding: 6px 20px;
    text-align: center;
    color: silver;
    border: 1px solid silver;
    border-bottom: 1px solid silver;
    white-space: nowrap;
    margin: 1px 1px -1px 0px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.tabstrip li.tabactive {
    color: #000000;
    background-color: #ffffff;
    border-bottom: 1px solid #ffffff;
}

JavaScript

$(document).ready(function() {
    
    $(".tabstrip li:contains('Three')").addClass("tabactive");

    $(".tabstrip li").on("click", function () {
        $(".tabstrip li").removeClass("tabactive");
        $(this).addClass("tabactive");
    });

});