JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<section id="gallery">
	<div class="item">
		<img src="http://cdn.bleedingcool.net/wp-content/uploads/2015/04/too_good_for_grumpy_cat.jpg"/>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
	</div> 
	<div class="item">
		<img src="http://cdn.bleedingcool.net/wp-content/uploads/2015/04/too_good_for_grumpy_cat.jpg"/>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
	</div> 
	<div class="item">
		<img src="http://cdn.bleedingcool.net/wp-content/uploads/2015/04/too_good_for_grumpy_cat.jpg"/>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
	</div> 
	<div class="item">
		<img src="http://cdn.bleedingcool.net/wp-content/uploads/2015/04/too_good_for_grumpy_cat.jpg"/>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
	</div> 
	<div class="item">
		<img src="http://cdn.bleedingcool.net/wp-content/uploads/2015/04/too_good_for_grumpy_cat.jpg"/>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
	</div> 
	<div class="item">
		<img src="http://cdn.bleedingcool.net/wp-content/uploads/2015/04/too_good_for_grumpy_cat.jpg"/>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
	</div> 
	<div class="item">
		<img src="http://cdn.bleedingcool.net/wp-content/uploads/2015/04/too_good_for_grumpy_cat.jpg"/>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
	</div> 
	<div class="item">
		<img src="http://cdn.bleedingcool.net/wp-content/uploads/2015/04/too_good_for_grumpy_cat.jpg"/>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
	</div> 
	<div class="item">
		<img src="http://cdn.bleedingcool.net/wp-content/uploads/2015/04/too_good_for_grumpy_cat.jpg"/>
		<p>Lorem ipsum dolor...

CSS

body{
	margin: 0 !important;
	height: 100vh;
	width: 100vw;
}	
#gallery{
	display: -webkit-flex;
    display: flex;
    margin: 0 auto;
   
    -webkit-justify-content: center;
    justify-content: center;
    
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;

}
.item {
	display: -webkit-flex;
    display: flex;
    
    -webkit-flex-direction: column;
    flex-direction: column;
   
	min-width: 300px;
    max-width: 300px;   
    
    margin: 5px;
	padding: 10px;
	    
    -webkit-justify-content: center;
    justify-content: center;
    
    background: #ccc;
    border: 2px solid black;
	border-radius: 5px;
	cursor: pointer;
}
.item:hover{
	-webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
}

img{
	display: -webkit-flex;
    display: flex;
    
    -webkit-algin-self: center;
    align-self: center;
    

	-webkit-background-size: cover;
	background-size: cover;
	
	border: 2px solid black;
	
    max-width: 250px;
    max-height: 141px;
}
p{
	text-align: center;
	color: #fff;
	margin: 5px;
}