JSFiddle - React, Tailwind, and code Playground

by Peter

HTML

<div class="wrapper">

	<!-- Begin >> Container -->
	<div class="container group">

		<div class="header-photo">
			<img src="img/alan-headshot-round.jpg" />
		</div>
		<div class="header-title font-title">
			<span style="color: #ffcc00;">A</span>M
		</div>
		
		<div id="menu">
			<ul>
				<li><a href="index.html">BOOKS</a></li>
				<li><a href="blog.html">BLOG</a></li>
				<li><a href="services.html">SERVICES</a></li>
				<li><a href="about.html">ABOUT ME</a></li>
				<li><a href="contact.html">CONTACT</a></li>
			</ul>
		</div>
	
	</div>
	<!-- End >> Container -->
	
</div>
<!-- End >> Wrapper -->

CSS

body {
	background-color: #3e4648;
	color:#ffffff;
	font-family: Calibri;
	font-size: 14px;
	font-weight: bold;
	margin:0;
	padding: 0;
	text-align: center; /* For IE6 purposes to fix bug */ 
}

div.wrapper {
	margin: 0 auto;
	position: relative;
	width: 800px;
}

div.container {
	height: 25px;
	left: 0px;
	position: relative;
	top: 35px;
	width: 800px;
}


/* BEGIN TITLE */

div.font-title {
	color: #ffffff;
	font-family: Calibri;
	font-size: 36px;
	font-weight: bold;
}

div.header-photo {
	background-color: #1c3641;
    display: inline-block;
    float: left;
	height: 72px;
	width: 100px;
	vertical-align: center;
}

div.header-title {
	background-color: #1c3641;
    display: inline-block;
    float: left;
	height:60px;
	width: 240px;
	padding-top: 12px;
}

/* END TITLE */

/* BEGIN NAVIGATION */

#menu {
    display: inline-block;
    float: left;
	font-family: calibri;
	font-size: 14px;
	font-weight: bold;
	height: 72px;
	width: 450px;
	background-color: #2e2f30;
	text-align: center;
	position: relative;
	border: 1px solid #fff;
}

#menu ul {
    border: 1px dotted green;
	display: block;
	height: 100%;
	margin: 0;
	list-style-type: none;
    padding: 0;
    width: 410px;
}

#menu li {
    background-color: #2e2f30;
	display: inline-block;
	float: left;
	height: 72px;
	min-width: 80px;
    width: 20%;
}

#menu li:hover {
	background-color: #353a3c;
}

#menu a {
    box-sizing: border-box;
	color: #fff;
    display: block;
    height: 100%;
    line-height: 72px;
    padding-top: 20px;
	text-decoration: none;
}

#menu a:hover{
	text-decoration: none;
}

.group:after {
	visibility: hidden;
	display: block;
	content: "";
	clear: both;
	height: 0;
	}
* html .group             { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */