JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class="navbar-left">
	<div id="top">
		<h2><b>Admin</b>Panel</h2>
	</div>
	<div id="navigation">
		<ul>
			<li class="nav-header">Main Pages: </li>
			<li>
				<a href="index.php">Home</a>
			</li>
			<li>
				<a href="about.php">About</a>
			</li>
			<li>
				<a href="livefeed.php">LiveFeed</a>
			</li>
			<li>
				<a href="portfolio.php">Portfolio</a>
			</li>
			<li>
				<a href="packages.php">Packages</a>
			</li>
			<li>
				<a href="contact.php">Contact</a>
			</li>
		</ul>

	</div>
</div>

<div id="navbar-top">
	<div id="user">
		<?php echo'<p id="user_greeting">'.$username. '<span class="fa fa-caret-down"></span>'.'</p>'?>
	</div>
	<div id="userDropdown">
		<ul id="dropdown-menu">
			<li class="user-header">
				<?php echo '<p>'.strtoupper($username).'</p>' . '<p>Last Login: </p>';?>
			</li>
			<li class="user-footer">
				<form action="" method="POST">
					<input type="submit" name="logout" id="logout">
				</form>
			</li>
		</ul>
	</div>
	<div id="icon">
		<span>
			<hr><hr><hr>
		</span>
	</div>
  
  <div class="main">
  
  </div>
	
	
</div>




</div>

CSS

html,body {
	height: 100%;
}

body {
	font-family: 'Helvetica Neue';
}

b {
	font-weight: bold;
}

.container {
	margin-left: 230px;
	height: 100%;
	position:relative;
}

.navbar-left {
	background-color:rgb(26, 34, 38);
	color:white;
	width: 230px;
	margin-left: -230px;
	height: 100%;
	float:left;
}

.navbar-left #top {
	background-color:#367fa9;
	min-height: 50px;
	text-align: center;
}

.navbar-left #top h2 {
	font-size: 20px;
	padding: 15px 0px;
}
#navbar-top {
	float:right;
	width: 100%;
	position:relative;
	background-color:#3c8dbc;
	width: 100% !important;
	margin:0 auto;
	border: none;
	min-height: 51px;
}


#navbar-top #icon {
	width: 20px;
	padding: 18px 10px !important;
}

#navbar-top #icon hr {
	margin:0 auto;
	padding: 0px;
	border: 1px solid white;
	border-radius: 5px;
}

#navbar-top #icon hr:not(:first-child) {
	margin-top: 5px;
}

#navbar-top > div:hover:not(#userDropdown) {
	background-color:#47a0d3;
	cursor: pointer;
}


#brand {
	float:left;
}

/** User name section*/
#user {
	float: right;
	border-left: 1px solid #36a5e5;
	padding: 18px 10px;
	color:white;
}

#user_greeting span {
	margin: 0px 5px;
}

#userDropdown {
	position:absolute;
	right: 0px;
	top: 53px;
	border: 1px solid #ddd;
	background-color: white;
	display: none;
	z-index: 99999;
}

.user-header {
	background-color:#3c8dbc;
	padding: 40px 50px;
	text-align: center;
	color:white;
}

.user-header p {
	margin: 10px 0px;
}

.user-header p:last-child {
	font-size: 10px;
	text-align: left;
	margin-left: 0px;
}			

.user-footer {
	padding: 10px 0px;
	float: right;
	background-color:#edeaea;
	width: 100%;
}

#logout {
	outline: none;
	border:none;
	color:white;
	padding: 8px 15px;
	float:right;
	margin-right: 15px;
	background-color:transparent;
	border: 1px solid #c7c7c7;
	color:#434343;
	cursor: pointer;
}

#logout:hover {
	border: 1px solid #919191;
}

.open {
	display: block;
}


/**Navigation Left**/
#navigation ul li {
}

#navigation .nav-header {
	background-color:...