JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Paul Coon | Sales Manager </title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One:400,|Open+Sans:400italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css"> 
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Paul Coon</h1>
        <h2>Sales Manager</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"">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
             <img src="img/numbers-02.jpg" alt"">
             <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
             <img src="img/numbers-06.jpg" alt"">
             <p>Trying to create an 80's style of glows.</p>
           </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
             <img src="img/numbers-09.jpg" alt"">
              <p>Drips created using Photoshop brushes.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
             <img src="img/numbers-12.jpg" alt"">
             <p>Creating shapes using repetition.</p>
           </a>
         </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/ustdad43"><img src="img/twitter-wrap.png" alt"Twitter Logo" class="social-icon"></a>
        <a...

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;
  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;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}
    
   
    
/********************************************
Navigation
********************************************/
    
 nav {
   text-align: center;
   padding: 10px 0;
   margin: 20px 0 0;
 }
       
    nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}
   
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;
  margin: 0 5px;
}
  
  


    
/********************************************
Page: Portfolio
********************************************/
#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}
   

#gallery li { 
  float: left;
  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 Color*/
header {
  background:...