JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top_navbar">
		<div id="top">
			<ul>
				<li id="top_1"><a href="javascript:void">Menu 1</a></li>
				<li id="top_2"><a href="javascript:void">Menu 2</a></li>
				<li id="top_3"><a class="default" href="javascript:void">Menu 3</a></li>
				<li id="top_4"><a href="javascript:void">Menu 4</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="left_1">
					<li><a href="javascript:void">Submenu 1.1</a></li>
					<li><a href="javascript:void">Submenu 1.2</a></li>
					<li><a href="javascript:void">Submenu 1.3</a></li>
					<li><a href="javascript:void">Submenu 1.4</a></li>
					<li><a class="default" href="javascript:void">Submenu 1.5</a></li>
					<li><a href="javascript:void">Submenu 1.6</a></li>
				</ul>
			</div>
			<div id="side">
				<ul id="left_2">
					<li><a href="javascript:void">Submenu 2.1</a></li>
					<li><a href="javascript:void">Submenu 2.2</a></li>
					<li><a href="javascript:void">Submenu 2.3</a></li>
					<li><a class="default" href="javascript:void">Submenu 2.4</a></li>
					<li><a href="javascript:void">Submenu 2.5</a></li>
					<li><a href="javascript:void">Submenu 2.6</a></li>
				</ul>
			</div>
			<div id="side">
				<ul id="left_3">
					<li><a href="javascript:void">Submenu 3.1</a></li>
					<li><a href="javascript:void">Submenu 3.2</a></li>
					<li><a class="default" href="javascript:void">Submenu 3.3</a></li>
					<li><a href="javascript:void">Submenu 3.4</a></li>
					<li><a href="javascript:void">Submenu 3.5</a></li>
					<li><a href="javascript:void">Submenu 3.6</a></li>
				</ul>
			</div>
			<div id="side">
				<ul id="left_4">
					<li><a href="javascript:void">Submenu 4.1</a></li>
					<li><a class="default" href="javascript:void">Submenu 4.2</a></li>
					<li><a href="javascript:void">Submenu 4.3</a></li>
					<li><a href="javascript:void">Submenu 4.4</a></li>
					<li><a...

CSS

/* BEGINNING OF THE TOP PANEL */

#top ul {
	background-color: rgb(013,026,039);
	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.left_active {
	background-color: rgb(013,026,039);
	color: rgb(255,255,255);
	}

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

#top ul li a.left_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(255,255,255);
	display: inline;
	font-size: 16px;
	line-height: 50px;
	padding: 16px 50px 16px 50px;
	text-decoration: none;
	}

#top_navbar {
	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.left_sub_active {
	border-bottom: 0;
	}

#side ul...

JavaScript

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

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



$(function() {
	$('#left_1 li').click(function() {
	$('#left_1 li').removeClass('left_sub_active');
	$('#left_2 li').removeClass('left_sub_active');
	$('#left_3 li').removeClass('left_sub_active');
	$('#left_4 li').removeClass('left_sub_active');
	$(this).addClass("left_sub_active");
	});
});

$(function() {
	$('#left_2 li').click(function() {
	$('#left_1 li').removeClass('left_sub_active');
	$('#left_2 li').removeClass('left_sub_active');
	$('#left_3 li').removeClass('left_sub_active');
	$('#left_4 li').removeClass('left_sub_active');
	$(this).addClass("left_sub_active");
	});
});

$(function() {
	$('#left_3 li').click(function() {
	$('#left_1 li').removeClass('left_sub_active');
	$('#left_2 li').removeClass('left_sub_active');
	$('#left_3 li').removeClass('left_sub_active');
	$('#left_4 li').removeClass('left_sub_active');
	$(this).addClass("left_sub_active");
	});
});

$(function() {
	$('#left_4 li').click(function() {
	$('#left_1 li').removeClass('left_sub_active');
	$('#left_2 li').removeClass('left_sub_active');
	$('#left_3 li').removeClass('left_sub_active');
	$('#left_4 li').removeClass('left_sub_active');
	$(this).addClass("left_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(){
$('#left_1 a').click(function(e){
	hideContentDivs();
	var tmp_div = $(this).parent().index();
	$('.left_1 div').eq(tmp_div).show();
});

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