JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<div id="container">
			<div id="headerContainer">Header</div><!--header-->
			
			<div id="bodyContainer">
				<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 class="clearfix"></div>				
			<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%;
    min-height:500px;
}
#footerContainer {
	margin: 0 auto;
	width: 96%;
	height: 10%;
	border: 1px solid #000000;
}
.clearfix {
	clear: both;
}