JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://fonts.googleapis.com/css?family=Montserrat:400,700|Cabin:400,700"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

<header>
  <a href="index.html" id="logo">
    <h1>Tim Watkins</h1>
    <h2>Coding</h2>
  </a>
  <nav>
    <ul>
      <li><a href="index.html">Portfolio</a></li>
      <li><a href="about.html" >About</a></li>
      <li><a href="contact.html" class="selected">Contact</a></li>
    </ul>

  </nav>
</header>
<div id="wrapper">  
  <section>  
  <h3>General Information</h3> 
    <p>I'm will be looking for work in the near future. Please don't hesitate to contact me!</p>
    <p> Please only use phone for urgent inquiers other wise twitter and email are the best way to contact me.</p>
  </section>

  <section>
    <h3>Contact Details</h3>
    <ul class="contact-info"> 
     <li class="phone">
        <a href="tel:555-1234">555-1234</a>
     </li>
     <li class="mail">
        <a href="mailto:[email protected]">
          [email protected]
        </a> 
     </li>
     <li class="twitter"> 
       <a href="http://twitter.com/intent/tweet?screen_name=timsepicfailure">
         @Timsepicfailure
       </a>
     </li>
   </ul>
<!-- div -->
  </section>
  <footer>
    <a href="http://twitter.com/timsepicfailure">

      <i class="fa fa-twitter"></i>
    </a>
    <a href="http://facebook.com/tim.watkins.328">
      <i class="fa fa-facebook"></i>
    </a>
    <p>&copy; 2016 Tim Watkins.</p>
  </footer> </div>

CSS

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

body { font-family: 'Cabin', sans-serif;

}

wrapper {

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

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0;

}

/*************************************** 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: 'Montserrat', Cabin; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 1.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: 700; padding: 15px 10px; }

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

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

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

/*************************************** PAGE ABOUT ************************************/

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

/*************************************** PAGE CONTACT ************************************/

.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

.contact-info a { display: block min-height: 20px; background-repeat: no-repeat; background-size: 20px...