JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top">
			<ul>
				<li class="menuitem-1">Menu 1</li>
				<li class="menuitem-2">Menu 2</li>
			</ul>
		</div>


		<div id="side">
				<ul id="submenu-1" class="invisible">
					<li class="menuitem-1">Left menu 1.1</li>
					<li class="menuitem-2">Left menu 1.2</li>
					<li class="menuitem-3">Left menu 1.3</li>
				</ul>
				<ul id="submenu-2" class="invisible">
					<li class="menuitem-1">Left menu 2.1</li>
					<li class="menuitem-2">Left menu 2.2</li>
					<li class="menuitem-3">Left menu 2.3</li>
				</ul>
		</div>


	<div class="content">
            
			<div id="content-1-1" class="invisible">
			<p>Content 1.1</p>
			</div>
			<div id="content-1-2" class="invisible">
			<p>Content 1.2</p>
			</div>
			<div id="content-1-3" class="invisible">
			<p>Content 1.3</p>
			</div>

			<div id="content-2-1" class="invisible">
			<p>Content 2.1</p>
			</div>
			<div id="content-2-2" class="invisible">
			<p>Content 2.2</p>
			</div>
			<div id="content-2-3" class="invisible">
			<p>Content 2.3</p>
			</div>
            
	</div>

CSS

.invisible { display:none; }
.active { color:red; }

JavaScript

$(document).ready(function() {
    
    // what should be active/visible on page load
    $('#top .menuitem-1').addClass('active');
    $('#side .menuitem-1').addClass('active');
    $('#side #submenu-1').removeClass('invisible');
    $('.content #content-1-1').removeClass('invisible');

    // what happens after top menu item click
    $('#top ul li').click(function(){
        // get number of pressed menu item from its class
        var itemId = getItemId(this);
        // activate pressed item
        $('#top li').removeClass('active');
        $('#top .menuitem-'+itemId).addClass('active');
        // display appropriate left menu
        $('#side ul').addClass('invisible');
        $('#side #submenu-'+itemId).removeClass('invisible');        
        // activate first item of submenu
        $('#side li').removeClass('active'); 
        $('#side #submenu-'+itemId+' .menuitem-1').addClass('active');
        // show appropriate content
        $('.content div').addClass('invisible');
        $('.content #content-'+itemId+'-1').removeClass('invisible');
    
    });
    
    // what happens after side menu item click
    $('#side ul li').click(function(){
        
        // get number of pressed menu item from its class
        var subItemId = getItemId(this);
        // get number of top menu active item
        var topItemId = getActiveTopMenuItemId();
        // activate pressed left menu item
        $('#side li').removeClass('active');
        $('#side #submenu-'+topItemId+' .menuitem-'+subItemId).addClass('active');
        // show appropriate content
        $('.content div').addClass('invisible');
        $('.content #content-'+topItemId+'-'+subItemId).removeClass('invisible');
    }); 

});

function getItemId(item){

    var cls = $(item).attr('class');
    var id = parseInt(cls.replace('menuitem-', ''));
    return id;    
    
}

function getActiveTopMenuItemId(){

    var cls = $('#top ul .active').attr('class');
    var id =...