JSFiddle - React, Tailwind, and code Playground

by Michael Gotostos

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

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-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 #575f6a;
}

#nav #nav #nav {
	position: absolute; 
	left: 100%; 
	top:0;
}




#content {
	overflow: hidden;
	background: #eeeeee;
}

#post-wrapper{
	margin: 20px 40px 20px 40px;
	position:...