JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>


    
    <title>Mohammed Mayat Portfolio</title>
   
  <body>
    <header>
     <div id="logoone">
      <a href="index.html" id="logo">
        <h1>Mohammed Mayat</h1>
        <h2>Web Designer/Developer</h2>
      </a>
        </div>
      <nav>
        <ul>
          <a href="portfolio.html"><li>Portfolio</li></a>
          <a href="contact.html"><li>Contact</li></a>
          <a href="about.html"><li>About</li></a>
        </ul>
      </nav>
    </header>
    
    <div id="Wrapper">
    
    <section>
     
       <ul id="gallery">
        <li>
    <a href="img/blackhawks.png" alt=""></a>
    <img src="img/blackhawks.png">
            <p>This ia a website I created about the Chiacgo Blackhawks using HTML and CSS</p>
        </li>
        <!--you might need to chage caption to paragarph tag treehouse -->
        
        <li>
    <a href="img/finalposter.png" alt=""></a>
    <img src="img/finalposter.png"><br>
       <p>This ia a infographic poster I have created for UCLan Archery Society</p>
        </li>
        <!--you might need to chage caption to paragarph tag treehouse -->
        
        <li>
    <a href="img/retouchsnow1.jpg" alt=""></a>
    <img src="img/retouchsnow1.jpg"><br>
       <p>This ia an image I have retouch in Photoshop</p>
        </li>
        <!--you might need to chage caption to paragarph tag treehouse -->
        
        <li>
    <a href="img/magzinecover1.png" alt=""></a>
    <img src="img/magzinecover1.png"><br>
            <p>This ia a magazine cover I have created for 3 on 3 Magazine which cover Ice Hockey</p>
        </li>
        <!--you might need to chage caption to paragarph tag treehouse -->
        </ul>
    </section>
    <footer>
     <a href="https://www.facebook.com"><img src="img/facebook-wrap.png"></a>
     <a href="https://twitter.com"><img src="img/twitter-wrap.png"></a>
      <p>&copy; 2017 Mohammed Mayat.</p>
    </footer>
      </div>
  </body>

CSS

/*********************
General
**********************/


/* site body */
body {
    background-color: #fff;
    color: #999;
    font-family: 'open sans', sans-serif;
}
a {
	text-decoration: none;
   
}

img {
    max-width: 100%;
}

#Wrapper {
	max-width: 100%;
	padding: 0 5%;
	margin: 0 auto;
	
}

/*********************
Header
**********************/

#logoone {
	margin: 0 auto;
	padding: 1%;
    text-align: center;
}



/* header section */
header {
    background: green;
    border-color: #5996ab;
}

/* style for headings */

h1 {
    font-family: 'changa one', sans-serif;
    margin: 15px 0;
    font-size: 1.75em;
    font-weight: normal;
}

h2 {
    font-size: 0.75;
    margin: -5px 0 0;
    font-weight: normal;
}
h1, h2 {
    color: #fff;
}

/* colored links*/
a {
    color: green;
}

/*********************
Nav
**********************/
/* set nav background color */
nav {
    background: #5996ab;
    text-align: center;
    padding: 10px 0;
    margin: 20px 0 0;
}
/* set style when nav visited */
nav a, nav a:visited {
    color: white;
}

/* set nav when selected */
nav a.selected, nav a:hover {
    color: #32673f;
}

nav a:hover {
    color:#32673f;
}

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

/****************Gallery styling
***************/

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

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

/* style the caption */

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