JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="wrap">

    <div id="topbar">
    </div>

    <div id="menu">
    </div>

    <div id="logo">
    </div>

    <div id="jumbotron">
    </div>

    <div id="recent">
      <h1>Recent Work</h1>
      <div class="col-md-2 col-md-offset-1">
        <a href="http://shniper1337.github.io/firstbootstrap/">
          <img src="images/firstbootstrap.png" class="img-rounded"></a>
      </div>
      <div class="col-md-2">
        <a href="http://shniper1337.github.io/pong/">
          <img src="images/pong.png" class="img-rounded"></a>
      </div>
      <div class="col-md-2">
        <a href="http://shniper1337.deviantart.com/art/Photomontage-490696483">
          <img src="images/design.png" class="img-rounded"></a>
      </div>
      <div class="col-md-2">
        <a href="http://shniper1337.deviantart.com/art/Website-design-WIP-571887134">
          <img src="images/survivingearth.png" class="img-rounded">
      </div>
      <div class="col-md-2">
        <a href="http://shniper1337.deviantart.com/art/Old-Law-Firm-545208961">
          <img src="images/lawfirm.png" class="img-rounded">
      </div>
    </div>

    <div id="galleries">
      <div class="row">
        <div class="col-md-4">
          <h2>Website Design</h2>
          <p>Extensive experience with image editing software, html and css code, and a unique perspective of an IT major formerly in graphic design.</p>
        </div>

        <div class="col-md-4">
          <h2>Software Engineering</h2>
          <p>Information Technology second-semester Sophomore at State University of New York at Cobleskill. Passion for solving problems with logic and code.</p>
        </div>

        <div class="col-md-4">
          <h2>Other Work</h2>
          <p>Former graphic artist with a background in a hobbyist form of art known as forum signatures.</p>
        </div>
      </div>
    </div>

    <div id="sn">
    </div>

    <div id="footer">
    </div>

  </div>

</body>

CSS

body {
  background-color: #EAE8EB;
}

wrap {
  margin: auto;
}

#topbar {
  width: 100%;
  height: 50px;
  background-color: #000;
  margin-top: -10px;
}

#jumbotron {
  width: 100%;
  height: 750px;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('http://www.arcanemarketing.com/wp-content/uploads/2013/05/placeholder.png');
}

#recent {
  margin: auto;
  background-color: #3C5F7C;
  width: 100%;
  height: 250px;
  margin-top: -20px;
}

#recent h1 {
  text-align: center;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 38px;
  font-weight: 700;
  padding-top: 10px;
  color: #EEF0F2;
}

#recent img {
  height: 155px;
  box-shadow: 5px 5px 5px #111111;
  margin-top: 10px;
  position: relative;
}

#galleries {
  background-color: #3c5f7c;
  height: 200px;
}

.col-md-4 {
  max-width: 27%;
  margin-left: 3%;
}

.row {
  margin-left: 6%;
}

#recent div:nth-of-type(1) img:hover {
  background-image: url("images/firstbootstrapfull.png");
  z-index: 1;
  position: relative;
}

#recent div:nth-of-type(2) img:hover {}

#recent div:nth-of-type(3) img:hover {}

#recent div:nth-of-type(4) img:hover {}

#recent div:nth-of-type(5) img:hover {}

#galleries h2 {
  font-size: 32px;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-weight: 500;
  color: #EEF0F2;
}

#galleries div:nth-of-type(1) h2 {
  text-align: right;
}

#galleries div:nth-of-type(2) h2 {
  text-align: center;
}

#galleries div:nth-of-type(3) h2 {
  text-align: left;
}

#galleries p {
  font-size: 18px;
  font-family: 'Catamaran', sans-serif;
  font-weight: 300;
  color: #eef0f2;
}

#galleries div:nth-of-type(1) p {
  text-align: right;
  margin: auto;
}

#galleries div:nth-of-type(2) p {
  text-align: center;
  margin: auto;
}

#galleries div:nth-of-type(3) p {
  text-align: left;
  margin: auto;
}

#footer {
  width: 100%;
  height: 20px;
  background-color: #000;
}