JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">

	<div class="col-4">
		<a class="thumb" href="#">
			<img src="http://fakeimg.pl/500x330/ccc/">
			<div class="caption"><span>Project title centered vertical and horizontal</span></div>
		</a>
	</div>

	<div class="col-4">
		<a class="thumb" href="#">
			<img src="http://fakeimg.pl/500x330/ccc/">
			<div class="caption"><span>Project title centered vertical and horizontal</span></div>
		</a>
	</div>


	<div class="col-4">
		<a class="thumb" href="#">
			<img src="http://fakeimg.pl/500x330/ccc/">
			<div class="caption"><span>Project title centered vertical and horizontal</span></div>
		</a>
	</div>

	<div class="col-4">
		<a class="thumb" href="#">
			<img src="http://fakeimg.pl/500x330/ccc/">
			<div class="caption"><span>Project title centered vertical and horizontal</span></div>
		</a>
	</div>

	<div class="col-4">
		<a class="thumb" href="#">
			<img src="http://fakeimg.pl/500x330/ccc/">
			<div class="caption"><span>Project title centered vertical and horizontal</span></div>
		</a>
	</div>

	<div class="col-4">
		<a class="thumb" href="#">
			<img src="http://fakeimg.pl/500x330/ccc/">
			<div class="caption"><span>Project title centered vertical and horizontal</span></div>
		</a>
	</div>
	
	<div class="col-4">
		<a class="thumb" href="#">
			<img src="http://fakeimg.pl/500x330/ccc/">
			<div class="caption"><span>Project title centered vertical and horizontal</span></div>
		</a>
	</div>

	<div class="col-4">
		<a class="thumb" href="#">
			<img src="http://fakeimg.pl/500x330/ccc/">
			<div class="caption"><span>Project title centered vertical and horizontal</span></div>
		</a>
	</div>

</div>

CSS

/************************************************
Site Name: 
Author: 
************************************************/

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

body {
  font-family: helvetica, arial, sans-serif;
  font-weight: normal;
  font-size: 100%;
  line-height: 1.4;
  color: #222;
  overflow-y: scroll;
  -webkit-font-smoothing: subpixel-antialiased;;
  -moz-font-smoothing: subpixel-antialiased;;
  font-smoothing: subpixel-antialiased;;
}

:hover {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

b, strong {
  font-weight: normal;
}

h1, nav {
  font-size: 1.9em;
  font-weight: normal;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;
}

h1 {
  text-align: left;
  margin: 30px 0 30px 0;
}

h2 {
  font-size: 1em;
  font-weight: normal;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 1px;
  margin: 0;
}

p {
  font-size: 1.188em;
  margin: 0 0 20px 0;
}

h1 a,
a:active,
a:visited {
  color: #111;
  text-decoration: none;
}

h1 a:hover {
  color: #999;
  text-decoration: none;
}

p a, 
a:active, 
a:visited {
  color: #111;
  text-decoration: underline;
}

p a:hover {
  text-decoration: none;
}

/************************************************
Thumbnails - Columns - Content
************************************************/

#container {
  display: block;
  margin: 110px 40px 100px 40px;
  overflow: hidden;
  background-color: transparent;
}

.content {
  margin: 0 auto;
  max-width: 1100px;
  overflow: hidden;
  display: -webkit-flex;
  -webkit-flex-flow: row wrap;
  display: -ms-flexbox;
  -ms-flex-flow: row wrap;
}

.content > div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.box1 {
  padding: 0 10px;
}

.box2 {
  padding: 0 40px;
}

.col-1,
.col-2,
.col-4,
.col-nav {
  position: relative;
  float: left;
}

.col-1 {
  width: 100%;
  background-color:...