JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
			<div class="nav">
				<div class="navTitle">1</div>
				<div class="subNav subNav1">test1</div>
				<div class="subNav subNav2">test2</div>
				<div class="subNav subNav3">test3</div>
				<div class="subNav subNav4">test4</div>
			</div>
			
		</div>
		
		<div class="container">
		
		</div>
		
		<div class="left">
			<div class="leftEles leftEle1"></div>
			<div class="leftEles leftEle2"></div>
			<div class="leftEles leftEle3"></div>
			<div class="leftEles leftEle4"></div>
			<div class="leftEles leftEle5"></div>
		</div>
		
		<div class="footer">
			
		</div>

CSS

body{
    margin: 0;
    padding: 0;
	overflow: hidden;
	font-size: 20px;
}

.header{
	width: 100%;
	height: 50px;
	background-color: #0092C7;
	position: relative;
}

.left{
	position: absolute;
	left: 0;
	top: 50px;
	width: 200px;
	bottom: 0;
	border-right: 1px solid #C0C0C0;
}

.container{
	position: absolute;
	left: 200px;
	top: 50px;
	bottom: 0;
	right: 0;
}

.leftEles{
	width: 100%;
	height: 50px;
	background-color: #F4F3DE;
	border-bottom: 1px solid #C0C0C0;
	cursor: pointer;
}

.leftEles:hover{
	opacity: 0.7;
}

.nav{
	width: 200px;
	height: 250px;
	line-height: 50px;
	float: right;
	text-align: center;
}

.navTitle{
	border-left: 1px solid #C0C0C0;
}

.subNav{
	border-bottom: 1px solid #C0C0C0;
	background-color: rgba(0,146,199,0.7);
	cursor: pointer;
}

.subNav:hover{
	color: #FFFFFF;
}