JSFiddle - React, Tailwind, and code Playground

HTML

Licenciaturas
<ul class="navi">
    <li><a class="menu2" href="#tab1">Eng Inf</a>
    </li>
    <li><a class="menu3" href="#tab2">Eng Quimic</a>
    </li>
    <li><a class="menu4" href="#tab3">Eng Civil</a>
    </li>
</ul>
<br>
<br>Mestrados
<ul class="navi">
    <li><a class="menu2" href="#tab10">Mestrado 1</a>
    </li>
    <li><a class="menu3" href="#tab11">Mestrado 2</a>
    </li>
    <li><a class="menu4" href="#tab12">Mestrado 3</a>
    </li>
    <li><a class="menu5" href="#tab13">Mestrado 4</a>
    </li>
    <li><a class="menu6" href="#tab14">Mestrado 5</a>
    </li>
</ul>
<div id='tab1'>TEXTO LICENCIATURA 1</div>
<div id='tab2'>TEXTO LICENCIATURA 2</div>
<div id='tab3'>TEXTO LICENCIATURA 3</div>
<div id='tab10'>TEXTO Mestrado 1</div>
<div id='tab11'>TEXTO Mestrado 2</div>

CSS

.active {
    background-color:green;
}

JavaScript

$('ul.navi').on('click', 'a', function (e) {
    //Change content displayed
    $($("ul.navi a.active")[0].hash).hide();      
    $(this.hash).show();
    
    //Change active item
    $("ul.navi a.active").removeClass("active");    
    $(this).addClass("active");  
    
    e.preventDefault();
});

//Hide all content divs except first one
$("ul.navi a").each(function(index){
    if(index != 0)
        $(this.hash).hide();
    else
        $(this).addClass("active");
});