JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="page" role="presentation">
<div id="banner" role="banner">
	<h1><a href="/index.php"><img src="images/banner.png" width="1025" height="166" alt="banner"></a></h1>
</div> <!-- banner div -->

<div id="contentarea" role="presentation">
    <!-- Nav Bar -->
    <div id="navigation" role="navigation">
    	<h2>Nav Bar</h2>
    </div> <!-- navigation div -->
    
    <!-- Main Content -->
    <div id="contentwrapper" role="presentation">
        <div id="content" role="main">
        
        	<h1>Header</h1>
         	Content <a href="#">link</a>
        </div> <!-- content div -->
        
        <!-- Sidebar -->
        <div id="sidebar" role="complementary">
        	<div id="userinfobox">
            	<p id="header">User Info</p>
                <div id="userinfo">
                    <div id="avatar"><img src="http://i936.photobucket.com/albums/ad202/CookieKunoichi/WHILS%20Stuff/Qwigllamaavvie.png" id="tag" alt="tag" /></div>
                    <p class="username">Username #</p>
                    <p id="icons">Icons</p>
                    <p id="membersonline"><a href="membersonline.php">Online Members (#)</a></p></div>
            	</div> <!-- userinfo div -->
            </div> <!-- userinfobox div -->
        </div> <!-- sidebar div -->
    </div> <!-- contentwrapper div -->

	<!-- Footer -->
    <div id="footer" role="contentinfo">
    	<a href="terms.php" title="Terms of Service">Terms of Service</a>&nbsp;|&nbsp;<a href="credits.php" title="Credits">Credits</a>&nbsp;|&nbsp;<a href="staff.php" title="Staff">Staff</a>&nbsp;|&nbsp;<a href="contact.php" title="Contact Us">Contact Us</a>&nbsp;|&nbsp;<a href="pp.php" title="Privacy Policy">Privacy Policy</a>&nbsp;|&nbsp;<a href="logout.php" title="Logout">Logout</a>
    </div> <!-- footer div -->

</div> <!-- content area div -->
</div> <!-- page div -->
</body>

CSS

/* Make Different Browsers Not Be Awkward */

* {
	margin: 0;
	padding: 0;
	border: 0;
}

/* General */

html, body {
	background: #D0B89D; /* REPLACE WITH BG IMAGE */
	color: #000000;
	font-family: "Tekton Pro", Tahoma, Geneva, sans-serif;
	position: relative;
}

/* Headers */

h1, h2, h3, h4, h5, h6 {
	color: #0D130D;
	font-family: "Segoe Script", "Freestyle Script Regular", "Lucida Handwriting Italic", "Lucida Calligraphy Italic", "Monotype, Corsiva Italic", "Gabriola Regular", "Harrington Regular", "Segoe Print", cursive;
	font-weight: normal;
}

/* Links */

a:link, a:visited {
	color: #7B9F73;
	text-decoration: none;
}

a:focus, a:hover, a:active {
	color: #603F25;
	text-decoration: none;
}

/* Layout */

#page {
	width: 1025px;
	height: 100%;
	margin: 0 auto;
	margin-top: 15px;
	position: relative;
	background-color: #7B9F73;
	border-radius: 5px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

#banner {
	width: 1025px;
	height: 166px;
	margin: 0 auto;
	position: relative;
	text-align: center;
}

/* Page Content Area */

#contentarea {
	width: 983px;
	height: 100%;;
	margin: 0 auto;
	position: relative;
}

/* Navigation */

#navigation {
	width: 983px;
	height: 67px;
	position: relative;
	color: #D2CB8D;
	font-family: "Segoe Script", "Freestyle Script Regular", "Lucida Handwriting Italic", "Lucida Calligraphy Italic", "Monotype, Corsiva Italic", "Gabriola Regular", "Harrington Regular", "Segoe Print", cursive;
	text-align: center;
	background: #673F25;
	line-height: 67px;
}

#navigation h2 {
	height: 67px;
	font-weight: normal;
	font-size: 2em;
	display: inline-block;
}

#navigation a, #navigation a:link, #navigation a:visited {
	display: inline-block;
	height: 67px;
	color: #D2CB8D;
	font-family: "Segoe Script", "Freestyle Script Regular", "Lucida Handwriting Italic", "Lucida Calligraphy Italic", "Monotype, Corsiva Italic", "Gabriola Regular", "Harrington Regular", "Segoe Print", cursive;
	font-weight: normal;
}

#navigation a:focus,...