JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nithin</a> 
        </li>
        <li><a href="#tabs-2">Vipin</a>

        </li>
        <li><a href="#tabs-3">Sachin</a>

        </li>
        <li><a href="#tabs-4">Ganguly</a>

        </li>
    </ul>
    <div id="tabs-1">
        <p>Nithin</p>
    </div>
    <div id="tabs-2">
        <p>Vipin</p>
    </div>
    <div id="tabs-3">
        <p>Sachin</p>
    </div>
    <div id="tabs-4">
        <p>Ganguly</p>
    </div>
</div>
<input type="checkbox" name="tabs-1" value="1">tabs-1
<input type="checkbox" name="tabs-2" value="2">tabs-2
<input type="checkbox" name="tabs-3" value="3">tabs-3
<input type="checkbox" name="tabs-4" value="4">tabs-4
<br>

CSS

.ui-state-disabled {
    display: none;
}

JavaScript

$(function () {
    $("#tabs").tabs();
    $("#tabs").tabs("option", {
        "selected": 0,
            "disabled": [1, 2, 3]
    });

    $("input[type=checkbox]").click(function () {
        if ($(this).is(':checked')) {
            $('#tabs').tabs("enable", $(this).val());
            $('#tabs').tabs("select", $(this).val());
            $('[id="' + this.name + '"]').find('p').show();
        } else {
            $('#tabs').tabs("disable", $(this).val());
            $('[id="' + this.name + '"]').find('p').hide();
        }
    });
});