JSFiddle - React, Tailwind, and code Playground

HTML

<header class="page_header">
    
		    <div id="title">Some title</div>    
			<span id="search"/><input type="text"><input type="submit" value="Search"/></span>
			
	</header>
	
	<nav>	<!-- Navigation -->
		<ul>
			<li><a href="index.html">Home</a></li>
			<li><a href="articles.html">Articles</a></li>
			<li><a href="new.html">New Post</a></li>
			<li><a href="faq.html">FAQ</a></li>
			<li><a href="contact.html">Contact</a></li>
			<li><a href="login.html">Login/Register</a></li>
		</ul>
	</nav>

CSS

/* Reset margin- and padding-styles
 */
 html, body {
    margin:0;
    padding:0;
    height:100%;
}
/* Tell the browser to render HTML 5 elements as block 
 */
 header, footer, nav, article {
    display: block;
}
/* Width of the body is defined as 940px and is centered 
 */
 body {
    width: 940px;
    margin: 0 auto;
    font: 16px/24px Helvetica, Arial, sans-serif;
    color: #445369;
    background: #f0f0f0;
}
/*  The wrapper is a container for all the page content.
    The wrapper <div> is set to position:relative, 
    which allows us to force the footer all the way to the bottom, 
    taking up that extra padding space created by the content <div>’s padding. 
    The minimum height of the wrapper element is 100%, which makes sure that 
    even if there is a teensy-small amount of content, the page will be at least that high 
 */
 #wrapper {
    min-height:100%;
    position:relative;
}
.page_header {
    padding: 30px;
    margin: 10px 0;
    width: 940px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.page_header #user {
    float: left;
    margin: 0;
}
.page_header #title {
    text-align: center;
    font-size: 24px;
}
.page_header #search {
    float: right;
    text-align: right;
}
h2 {
    font-size: 28px;
    line-height: 44px;
    padding: 22px 0;
}
h3 {
    font-size: 18px;
    line-height: 22px;
    padding: 11px 0;
}
p {
    padding-bottom: 22px;
}
/*------------------------------
 = NAVIGATION
 ------------------------------*/
 nav {
    position: absolute;
    left: 0;
    width: 100%;
    background: #445369;
    /* Border-radius not implemented yet */
    -moz-border-radius: 22px;
    -webkit-border-radius: 22px;
    -moz-box-shadow: 0 0 5px 5px #888;
    -webkit-box-shadow: 0 0 5px 5px #888;
    box-shadow: 0 0 5px 5px #888;
}
nav ul {
    margin: 0 auto;
    width: 940px;
    list-style: none;
}
nav ul li {
    float: left;
}
nav ul li a {
    display: block;
    margin-right: 20px;
    width: 120px;
    font-size:...