JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<div id="container">
			<div id="headerContainer">Header</div><!--header-->
			
			<div id="bodyContainer" class="clear">
				<div id="leftNav">
					<ul>
				<li><a href=''>Admin</a></li>
				<li><a href=''>Admin</a></li>
				<li><a href=''>Admin</a></li>
				<li><a href=''>Admin</a></li>
				<li><a href=''>Logout</a></li>
			</ul> 
				</div> <!--leftNav-->
			
				<div id="content">
					<form id="form" method="post" action="index.php">
	<div>
	<label for="username">Username</label>
	<input type="username" name="username" value="username">
	</div>
	
	<div>	
	<label for="password">Password</label>
	<input type="password" name="password" value="password">
	</div>
		
	<div id="submitDiv">	
	<input type="submit" name="submit" value="submit">
	</div>
</form>

 
				</div> <!--content-->
			</div><!--bodyContainer-->
						
			<div id="footerContainer">Footer</div><!--footer-->		
		</div><!--container-->
	</body>

CSS

/* CSS Document */
* {
	margin: 0;
	padding: 0;
}


body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	bakground-color:#FFFFFF;
}


#container {
	width: 100%;
}


#headerContainer {
	margin: 0 auto;
	width: 96%;
	height: 10%;
	border:1px solid #000000;
}


#bodyContainer {
	margin: 0 auto;
	width: 96%;
	border:1px solid #000000;
}



#leftNav {
	margin: 0 auto;
	width: 15%;
	border:1px solid #000000;
	float: left;
	
}



#leftNav ul{
	list-style-type:none;
	margin-left: 3px;
	padding: 3px 0px 3px 0px;
}


#leftNav ul li{
	
}


#leftNav ul li a{
	font-size: 12px;
	display:block;
	text-decoration:none;
}


#leftNav ul li a:hover{
	background-color:#F7F7F7;
}




#content {
	border:1px solid #000000;
	margin-left: 15%;
}




#footerContainer {
	margin: 0 auto;
	width: 96%;
	height: 10%;
	border:1px solid #000000;
}

.clear:after {
    display: table;
    content: "";
    clear: both;
}