JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<?xml version="1.0" encoding="utf-8" ?>
	<html>
		<head>
			<title>Kitties</title>
				<link rel="icon" type="image/gif" href="lol_cats_wallpaper.gif">
				<link rel="stylesheet" type="text/css" href="theme.css">
		</head>

		<body>
				<h1>Kitties</h1>
					<div id="container">
					
										<article>
						
											<div class="item">
												<img src="4-cute-cats.jpg" class="centerImage" width="300" height="300" />
												<p class="centerText">They hunt in packs.</p>
											</div>
											
											<div class="item">
											
												<img src="cat_sniping.jpg" class="centerImage" width="256" height="192" />
												<p class="centerText">Sniper Cat</p></a>
											</div>
											
											<div class="item">
												<img src="LOL1.jpg" class="centerImage" width="300" height="298" />
												<p class="centerText">Sneaking Cat</p>
											</div>
											
											<div class="item">
												<img src="hammercat.jpg" class="centerImage" width="300" height="163" />
												<p class="centerText">80s Cat</p>
											</div>
										
										</article>
											<article>
											<div class="item">
												<img src="kittytrap.jpg" class="centerImage" width="200" height=492 />
												<p class="centerText">It's a trap!</p>
											</div>
											<div class="item">
												<img src="chop-cats.jpg" class="centerImage" width="300" height="140" />
												<p class="centerText">They can strip a car to the frame in under 2:00 minutes.</p>
											</div>
											<div class="item">
												<img src="smartkat.jpg" class="centerImage" width="200" height="338" />
												<p class="centerText">Intelligent cat.</p></a>
											</div>
											<div class="item">
												<img src="narniacat.jpg" class="centerImage" width="200" height="337"...

CSS

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body { background-color:DarkOrchid; }
h1 { text-decoration:underline; }
h4 { text-decoration:underline; }
a:visited { color:DarkSlateBlue; }  
a:hover { color:#FF7F50; }  
a:active  { color:#FF1493; } 

a:link {
	color:DarkSlateBlue;
	text-decoration:none;
}      

.centerText
{
 text-align:center;
}

.wrapper {
    margin: 1%;
    overflow: hidden;
    background-color:#ffffff;
}

.item {
    border: 1px solid black;
    height: 200px;
    float: left;
    display: inline-block;
    width: 23%;
    position: relative;
    margin: 1%;
}

.item > img {
    width: 100%;
}