JSFiddle - React, Tailwind, and code Playground

HTML

<header>
      <a href="#">
        <h1>Jason K</h1>
        <h2>Bum</h2>
      </a>
    </header>
    <div id="wrapper">
      <section>
      <ul id="gallery">
        <li>
          <a href="#">
            <img src="http://www.asi.it/files/images/1024X768_02_0.jpg" alt="New York">
            <p>sample sample sample</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="http://oldweb.lbto.org/images/n891_1024x768.jpg" alt="Los Angeles">
            <p>sample sample sample</p>
          </a>
        </li>
      </ul>
      </section>
    </div>

CSS

*{
    clear:both;
}


html, body, header {
  margin: 0;
  padding: 0;
}


body {
  background-color:#d7d7e8;
}

/*************************************************
NAV
*************************************************/
header {
  width:100%;
  float:left;
  margin:0 0 30px 0;
  background-color:cyan;
}

/**************************************************
PORTFOLIO PAGE
***************************************************/
#wrapper {
  max-width:1550px;
  margin:0px auto;
}

#gallery li {
  width:30%;
  float:left;
  list-style:none;
  margin:0% 10%;
}

img {
  max-width:100%;
}

a img {
  margin-bottom:-20px;
}

a p {
  background-color:#ffffff;
  text-align:center;
  padding:5px;
  border-radius:0 0 6px 6px;
}

li a, header a {
  text-decoration:none;
  color:#58585b;
}