JSFiddle - React, Tailwind, and code Playground

HTML

<div id="masthead" class="push_2 grid_8">
    
    
    <nav id="mainnav">
      <ul>
        <li><a href="#" id="home"><span class="icon"></span>Home</a></li>
        <li><a href="#" id="about"><span class="icon"></span>About/CV</a></li>
        <li><a href="#" id="blog"><span class="icon"></span>Blog</a></li>
        <li><a href="#" id="portfolio"><span class="icon"></span>Portfolio</a></li>
        <li><a href="#" id="wip"><span class="icon"></span>WIP</a></li>
      </ul>
    </nav>
        
        <img src="http://imgur.com/DIcUa.png" />
  </div>
    <div class="clear"></div>

    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <!--[if IE 6]>
  <script src="http://addondb.googlecode.com/svn-history/r207/trunk/cdn/js/dd_belatedpng.js"></script>
  <script>
  $(function() {
    DD_belatedPNG.fix('#masthead img, #mainnav .icon');
  });
  </script>
  <![endif]-->

CSS

body { 
    background: #BFC1CE; 
}
li {
    float: left;
}
a:link, a:visited {
    color: #616167; 
    font: bold 18px/24px arial, helvatica, sans-serif;
    text-decoration: none;
    display: block;
    padding: 0 10px;
}
.icon {
    background: url("http://imgur.com/dRi2A.png");
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto;
}