JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
  
	<div id="header">		 
        
        <div class="container group">
            
        <img class="logo" src="http://s23.postimg.org/6msevaejv/logo.jpg" alt=""/>
           
        <div class="contact">
            <p>M: 07845 344 846</p>
            <p>E: <a href="mailto:contact@rdoyle.info">contact@rdoyle.info</a></p>
        </div>
            
        </div>
        
            <nav class="navigation 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" class="group">
         
        <div id="leftColumn" class="group">
         <img class="right" src="http://rdoyle.info/images/picture.png"/>
		<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....

CSS

.mystyle {
}

* {
	margin: 0;
	padding: 0;
}

.right{
    float: right;
    margin: 0 0 10px 20px;
}

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

#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 {
    margin: 10px 0 15px 0;
    display: block;
    height: 30px;
    border-top: 1px solid #FFF;
    padding: 10px 0 0 0;
}
.navigation ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.navigation li {
    text-align: center;
    float: left;
    margin: 0;
    padding: 0;
    width: 25%;
}
.navigation 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;
}

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

.container{
    width: 691px;
    display: table;
}

.logo{
    display: display: table-cell;
}

.contact{
    width: 27%;
    display: table-cell;
    vertical-align: bottom;
    color: #63C2DE;
    text-transform: uppercase;
}

.contact a{
    color: #63C2DE;
    text-decoration:...