JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top_nav">
		<div id="top">
			<ul>
				<li><a href="javascript:void">Menu 1</a></li>
				<li><a href="javascript:void">Menu 2</a></li>
			</ul>
		</div>
	</div>

					<div id="divider" style="height: 13px"></div>

	<div style="float: left; height: 300px; width: 300px;">
		<div class="top">
			<div id="side">
				<ul id="sub_1_1">
					<li><a href="javascript:void">Left menu 1.1</a></li>
					<li><a href="javascript:void">Left menu 1.2</a></li>
					<li><a href="javascript:void">Left menu 1.3</a></li>
				</ul>
			</div>
			<div id="side">
				<ul id="sub_1_2">
					<li><a href="javascript:void">Left menu 2.1</a></li>
					<li><a href="javascript:void">Left menu 2.2</a></li>
					<li><a href="javascript:void">Left menu 2.3</a></li>
				</ul>
			</div>
		</div>
	</div>

	<div style="float: left; height: 300px; width: 300px;">
		<div class="sub_1_1">
			<div>
			<p>Content 1.1</p>
			</div>
			<div>
			<p>Content 1.2</p>
			</div>
			<div>
			<p>Content 1.3</p>
			</div>
		</div>
		<div class="sub_1_2">
			<div>
			<p>Content 2.1</p>
			</div>
			<div>
			<p>Content 2.2</p>
			</div>
			<div>
			<p>Content 2.3</p>
			</div>
		</div>
	</div>

CSS

/* BEGINNING OF THE TOP PANEL */

#top ul {
	display: block;
	list-style-type: none;
	margin: 0;
	padding: 0px;
	position: relative;
	text-align: center;
	}

#top ul li {
	border: 0px;
	display: inline;
	font-size: 12px;
	}

#top ul li.sub_1_active {
	background-color: rgb(013,026,039);
	color: rgb(255,255,255);
	}

#top ul li.sub_1_active a {
	background-color: rgb(013,026,039);
	color: rgb(255,255,255);
	padding: 11px 50px 11px 50px;
	}

#top ul li a.sub_1_active {
	background-color: rgb(255,000,000);
	color: rgb(255,255,255);
	display: inline;
	padding: 16px 50px 16px 50px;
	}

#top ul li a {
	color: rgb(013,026,039);
	display: inline;
	font-size: 16px;
	line-height: 50px;
	padding: 16px 50px 16px 50px;
	text-decoration: none;
	}

#top_nav {
	background-image: url('background_top.png');
	background-size: 900px 50px;
	height: 50px;
	width: inherit;
}


/* END OF THE TOP PANEL */




/* BEGINNING OF THE LEFT PANEL */

#side,
#side ul,
#side ul li,
#side ul li a {
	border: 0px;
	box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-o-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	display: block;
	line-height: 1;
	list-style: none;
	margin: 0px;
	padding: 0px;
	position: relative;
	}

#side {
	margin-left: 27px;
	width: 230px;
	z-index: 10;
	}

#side ul {
	background: rgb(255,255,255);
	background: linear-gradient(to top, rgb(222,222,222), rgb(255,255,255));
		background: -moz-linear-gradient(bottom, rgb(222,222,222), rgb(255,255,255));
		background: -ms-linear-gradient(bottom, rgb(222,222,222), rgb(255,255,255));
		background: -o-linear-gradient(bottom, rgb(222,222,222), rgb(255,255,255));
		background: -webkit-linear-gradient(bottom, rgb(222,222,222), rgb(255,255,255));
	border: 1px solid rgb(192,192,192);
	border-radius: 10px;
	}

#side ul li {
	border-bottom: 1px transparent rgb(192,192,192);
	display: block;
	}

#side ul li.sub_1_sub_active {
	border-bottom: 0;
	}

#side ul li:last-child {
	border-bottom:...

JavaScript

$(function() {
	$('#top li').click(function() {
	$('#top li').removeClass('sub_1_active');
	$(this).addClass("sub_1_active");
	});
});

$(function() {
	$('#top li a').click(function() {
	$('#top li a').removeClass('sub_1_active');
	$(this).addClass("sub_1_active");
	});
});



$(function() {
	$('#sub_1_1 li').click(function() {
	$('#sub_1_1 li').removeClass('sub_1_sub_active');
	$('#sub_1_2 li').removeClass('sub_1_sub_active');
	$(this).addClass("sub_1_sub_active");
	});
});

$(function() {
	$('#sub_1_2 li').click(function() {
	$('#sub_1_1 li').removeClass('sub_1_sub_active');
	$('#sub_1_2 li').removeClass('sub_1_sub_active');
	$(this).addClass("sub_1_sub_active");
	});
});


$(function(){
$('#top a').click(function(e){
     hideContentDivs();
     var tmp_div = $(this).parent().index();
     $('.top div').eq(tmp_div).show();
  });

function hideContentDivs(){
    $('.top div').each(function(){
    $(this).hide();});
}
hideContentDivs();
});



$(function(){
$('#sub_1_1 a').click(function(e){
     hideContentDivs();
     var tmp_div = $(this).parent().index();
     $('.sub_1_1 div').eq(tmp_div).show();
  });

function hideContentDivs(){
    $('.sub_1_1 div').each(function(){
    $(this).hide();});
    $('.sub_1_2 div').each(function(){
    $(this).hide();});
}
hideContentDivs();
});


$(function(){
$('#sub_1_2 a').click(function(e){
     hideContentDivs();
     var tmp_div = $(this).parent().index();
     $('.sub_1_2 div').eq(tmp_div).show();
  });

function hideContentDivs(){
    $('.sub_1_1 div').each(function(){
    $(this).hide();});
    $('.sub_1_2 div').each(function(){
    $(this).hide();});
}
hideContentDivs();
});