JSFiddle - React, Tailwind, and code Playground

HTML

<title>Pablo Paramo | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">


<header>
  <a href="index.html" id="logo">
    <h1>Pablo Nicolas Paramo</h1> 
    <h2>Designer</h2>
  </a>
 <nav>
    <ul>
    <li><a href="index.html" class="selected">Portfolio</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li> 
    </ul> 
  </nav>
</header>
<div id="wrapper">
  <section>
    <ul id="gallery">
      <li>
        <a href="img/numbers-01.jpg">
            <img src="img/numbers-01.jpg" alt="" height="400" width="600"/>
          <p>Beatiful wheets.</p>
        </a>
      </li>
      <li>
        <a href="img/numbers-02.jpg">
            <img src="img/numbers-02.jpg" alt="" height="400" width="600"/>
          <p>Happy family.</p>
        </a>
      </li>
      <li>
        <a href="img/numbers-06.jpg">
            <img src="img/numbers-06.jpg" alt="" height="400" width="600"/>
          <p>Orange color.</p>
        </a>
      </li>
      <li>
        <a href="img/numbers-09.jpg">
            <img src="img/numbers-09.jpg" alt="" height="400" width="600"/>
          <p>World mission.</p>
        </a>
      </li>
      <li>
        <a href="img/numbers-12.jpg">
            <img src="img/numbers-12.jpg" alt="" height="400" width="600"/>
          <p>African Children.</p>
        </a>
      </li> 
 </ul>
    </section>
    <footer>
        <a href="http://twitter.com"><img src="img/twitter.png" alt="Twitter Logo" class="social-icon"/></a>     
      <p>&copy; 2014 Pablo Paramo.</p>
    </footer>
  </div>

CSS

/***********************************
 GENERAL
***********************************/

body {
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}



/***********************************
HEADING
***********************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
  padding: 0 0 10px;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
  padding: 0 0 20px 0;

}



/***********************************
NAVEGATION
***********************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
  text-align: center;
}

nav li {
  display: inline-block;
}

nav a {
 font-weight: 800;
  padding: 15px 10px;
}



/***********************************
FOOTER
***********************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon {
  width: 20px;
  height: 20px;
}

/***********************************
PAGE: PORTFOLIO
***********************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  list-style: none;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}

/***********************************
 COLORS
***********************************/

/* Site body */
body {
  background-color: #fff;
  color: #999;
  }

/* Green header*/
header {
  background-color: #6ab47b;
  border-color: #599a68:

/* Nav background on mobile */
nav {
  background: #599a68;
}    

/* Logo text*/ 
}
h1, h2...