JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="wrapper">
  <section>
    <ul id="gallery">
		<li><a href="img/numbers-01.jpg"><img src="img/numbers-01.jpg"><p>Experimentation with color and texture.</p></a></li>
    </ul>
  </section>
  <footer>
    <p>&copy; 2017 Nick Pettit.</p>
  </footer>
</div>
</body>

CSS

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

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

img {
  max-width: 100%;
}



/***************
PAGE: Portfolio
***************/

#gallery {
	max-width: 100%;
	margin: 0px;
	padding: 0px;
}

#gallery li {
	max-width: 45%;
	float: left;
	list-style: none;
	margin: 2.5%;
	background-color: #f5f5f5;
}

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



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

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