JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="thumnails">
				<li class="img-thum">
					<img src="http://lorempixel.com/1000/800/"/>
					<p class="thum-capt">How a Squad of Ex-Cops Fights Police Abuses</p>
				</li>
				
				
				

			
				
			</ul>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.thumnails {
	width: 100%;
	display: block;
	float: left;
	overflow: hidden;
	padding: 0;	
	margin: 12px auto;	
	position: relative;
	list-style: none;
    background:black;
    font-size:0; /* required to remove white space */
}

.thumnails .img-thum {
	width: 25%;
	float: left;
	padding: 0;	
	margin: 0 auto;	
}

.thumnails .img-thum img {
	width: 100%;
	padding: 0;
	margin: 0;
}

.thumnails .img-thum .thum-capt {
	width: 100%;
	float: left;
	overflow: hidden;
	display: block;
	position: relative;
	padding: 0;
	margin: 0;
	font-weight: bold;
	font-size: 14px;
	font-family: serif;
}