JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav-holder">
					<ul id="nav"><!-- first UL -->
						<li id="list-group">
							<a href="#" id="active">Home</a>
						</li>
						<li id="list-group">
							<a href="#">Tools</a>

							<ul id="nav"><!-- second UL -->
								<li id="list-group">
									<a href="add-client-admin.php">Add New Client</a>
								</li>
								<li id="list-group">
									<a href="announcement-admin.php">Post Announcement</a>
								</li>
								<li id="list-group">
									<a href="update-client-admin.php">Update Client Information</a>
								</li>
							</ul><!-- end of second UL -->
						</li>
						<li id="list-group">
							<a href="#">View</a>

							<ul id="nav"><!-- fourth UL -->
								<li id="list-group">
									<a href="client-list-admin.php">Client List</a>
								</li>
								<li id="list-group">
									<a href="choose-reports-admin.php">Reports</a>
								</li>
							</ul><!-- end of fourth UL -->
						</li>
						<li id="list-group">
							<a href="payment-admin.php">Payments</a>
						</li>
						<li id="list-group">
							<a href="about-admin.php">About</a>
						</li>
					</ul><!-- end of first UL -->
					<ul id="nav-right">
						<li id="list-group">
							<a href="?logout">Logout</a>
						</li>
					</ul>
			</div>

    <div id="content" class="container">
	 			<div id="post-wrapper">
	 				<small>Posted at 2015-02-24 by <a href="#">jarn</a></small>
				<blockquote><p>On his Formspring account, Jagmin predicted that A Skylit Drive would begin writing and recording a follow-up to Adelphia during Summer 2010. He also suggested that the album would see an early 2011 release.[5]

In February 2010 Hassle Records published on their web site &quot;We have new recruits to the Hassle Records family, please welcome A Skylit Drive with open arms... Fresh out of California, A Skylit Drive have been together in their current line-up since 2007 and have been touring their unique brand of metalcore across the US. We released their...

CSS

*{box-sizing: border-box}
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, 
img, form, fieldset, blockquote {
    margin:0 auto;
	padding:0;
}


body {
	background: #222222;
	font: 63% "Century Gothic", Tahoma, Helvetica;
}


#listpost{
	margin-left: 50px;
	line-height: 1.3em;
	font-size: 1.3em;
}
/**
#nav-holder{
	background: #333333;
	padding-left: 30px;
	padding-right: 30px;
}
**/
#nav-holder {
    background: #333333;
    padding-left: 30px;
    padding-right: 30px;
    width: 100%;
    clear: both;
    display: inline-block;
}

#nav-right{
	display: block;
	float: right;
}

#nav-right #list-group a {
	padding: 7px 10px;
	display: inline-block;
	color: #fff;
	border-top: solid 3px #333333;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 1.4em;
}

#nav-right #list-group a:hover {
    background-color: #e18728;
    border-top-color: #e18728; 
}
#nav #list-group a#active {
	background-color: #e18728;
	border-top-color: #964d00;
	color: #FFF;
}
#nav{
	float: left;
	display: block;
	z-index: 1000;
}

#nav #list-group{
	list-style: none;
	position: relative;
	display: inline-block;
}

#nav #list-group a {
	padding: 7px 10px;
	display:block;
	color: #fff;
	border-top: solid 3px #333333;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 1.4em;
}

#nav #list-group #nav #list-group #nav, #nav #list-group #nav {
    display: none;
    position: absolute;
    background-color: #333333;
}

#nav #list-group a:hover {
    background-color: #e18728;
    border-top-color: #964d00; 
}

#nav #list-group #nav #list-group a:hover {
    background-color: #e18728;
    border-top-color: #e18728; 
}

/*in ul*/
#nav #list-group:hover #nav{
	display: block;
}

/* inner ul */
#nav #list-group #nav #list-group:hover #nav {
	display: block;
}

/*design inner ULs*/
#nav #list-group #nav {
	width: 170px;
	display: none;
}

/*in ul*/

#nav #list-group #nav #list-group {
	width: 170px;
	border-top: 1px solid #6b727c;
	border-bottom: 1px solid...