JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
  
	<div id="header">		 
		<img src="http://rdoyle.info/images/header.png" alt="">
		<nav class="group">
	    	<ul>
	        	<li class="services"><a href="#aboutme">Services</a></li>
	        	<li class="aboutme"><a href="#services">About Me</a></li>
	        	<li class="downloadcv"><a href="#downloadcv">Download CV</a></li>
	        	<li class="contact"><a href="#contact">Contact</a></li>
	    	</ul>
		</nav>	
	</div> <!-- end header -->

	 <div id="main">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at ornare
		metus, a venenatis massa. Mauris vehicula tincidunt nisi in volutpat. Nullam
		rutrum a tellus ut bibendum. Fusce commodo risus ac tempor rhoncus. Sed ultricies
		non ligula a lobortis. Vestibulum eu justo a neque faucibus congue vel vitae
		nibh. Nullam et diam erat.</p>
		
		<p>Curabitur ut enim vel velit semper blandit a non ligula. Morbi eget lacus
		felis. In sed odio eget lacus tempor vulputate sagittis ut orci. Phasellus varius,
		eros non volutpat aliquam, purus sem viverra quam, tincidunt auctor augue tellus
		pulvinar purus. Duis scelerisque augue vitae elementum interdum. Pellentesque
		nisi ligula, vehicula ac purus aliquam, fermentum accumsan velit. Sed non congue
		sem, vel fringilla ante. Pellentesque habitant morbi tristique senectus et netus
		et malesuada fames ac turpis egestas. Nullam sodales elit nec sem blandit lobortis.</p>
		
		<p>Nullam varius odio nec odio commodo rutrum. Suspendisse sed purus in dolor
		semper aliquam eget vel velit. Morbi vitae leo quis orci sagittis pulvinar et
		ac nunc. Sed eget velit sem. Donec facilisis posuere quam, nec luctus nisi
		luctus sit amet. Nam sed porttitor urna. Donec iaculis, erat a vehicula mollis,
		tortor elit fringilla diam, pellentesque eleifend tellus sem ac velit. Donec
		rhoncus tristique nunc quis consequat. Etiam vel mauris luctus, venenatis justo
		et, viverra felis. Quisque et risus risus. Fusce quis enim quam. Donec faucibus
		vulputate...

CSS

.mystyle {
}

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	background-color: #2D2D2D;
    line-height: 1.5; /*add some better spacing for lines*/
}

#wrapper {
	width: 691px; /*let's set your page width*/
	margin: 0px auto;
}

.group:before,
.group:after {
    content: "";
    display: table;
} 
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

#header {
	width: 691px; 
}

@font-face {
    font-family: 'print_clearlyregular';
    src: url('fonts/PrintClearly-webfont.eot');
    src: url('fonts/PrintClearly-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/PrintClearly-webfont.woff') format('woff'),
         url('fonts/PrintClearly-webfont.ttf') format('truetype'),
         url('fonts/PrintClearly-webfont.svg#print_clearlyregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

#navigation	{
	width: 691px;
	height: 21px;
	background-color:#2D2D2D;
	margin: 0 auto;
    margin: 10px 0 15px 0;
}

nav {
    height: 21px;
    margin: 10px 0 15px 0;
    display: block;
}
nav ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
nav li {
    text-align: center;
    height: inherit;
    float: left;
    margin: 0;
    width: 25%;
}
nav li a {
    display: inline-block;
    height: 100%;
    /*make use of font family from font squirrel*/
    font-family: "print_clearlyregular", sans-serif;
    text-decoration: none;
    color: #63C2DE;
    font-size: 16px;
    text-transform: uppercase;
}

nav li a:hover {
    /*set hover style*/
    border-bottom: 1px solid #63C2DE;
}

#main {
	float: left;
	width: 490px;
	color: #ADABAB;
	background-color: #2D2D2D;
	margin: 0px auto;
	padding: 0 0 0 10px;
    /*Help make padding count as part of width instead of adding to width*/
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   ...