JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="tabs">
    <li><a href="#">Test 1</a></li>
    <li><a href="#">Test 2</a></li>
    <li><a href="#">Test 3</a></li>
</ul>
 
<div id="panel_wrapper">
    <div>div 1</div>
    <div>div 2</div>
    <div>div 3</div>
</div>

CSS

#panel_wrapper>div{
    padding:10px;
    width:200px;
    height:200px;
    margin: 20px 0;
    text-align: center;
    vertical-align: middle;
    line-height: 200px;
    border:1px solid black;
    display: none;
}

JavaScript

$("#tabs a").click(function (e) {
    e.preventDefault(); //preprecimo izvajanje default obnasanja
    
    $("#panel_wrapper>div").hide(); //skrijemo vse dive (prvi nivo)
    var idx = $(this).closest('li').index(); //preverimo kateri menu smo kliknli po vrsti
    $("#panel_wrapper>div:eq("+idx+")").show(); //prikazemu ustrezni panel
});

$("#tabs a:eq(0)").trigger("click");