JSFiddle - React, Tailwind, and code Playground

HTML

<div class="product_section">
				<ul class="list_product">
					<li>
						<a href="#">
							<div class="product_frame" style="background-image: url(http://image.haier.com/pk/nv/consumer/refrigerator/tfnf/201208/P020121130740687231395.png);"></div>
							<div class="product_name">
							<p>dfddfdfd<br />dfdffd</p>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="product_frame" style="background-image: url(cupload/product/product_1.jpg);"></div>
							<div class="product_name">
							<p>dfddfdfd<br />dfdffd</p>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="product_frame" style="background-image: url(cupload/product/product_1.jpg);"></div>
							<div class="product_name">
							<p>dfddfdfd<br />dfdffd<br />dfdffd</p>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="product_frame" style="background-image: url(cupload/product/product_1.jpg);"></div>
							<div class="product_name">
							<p>dfddfdfd<br />dfdffd</p>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="product_frame" style="background-image: url(cupload/product/product_1.jpg);"></div>
							<div class="product_name">
							<p>dfddfdfd<br />dfdffd<br />dfdffd</p>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="product_frame" style="background-image: url(cupload/product/product_1.jpg);"></div>
							<div class="product_name">
							<p>dfddfdfd<br />dfdffd</p>
							</div>
						</a>
					</li>
				</ul>
			</div>

CSS

*, *:before, *:after {
    box-sizing: border-box;
}

.product_section {
	display: inline-block;
	margin: 15px;
	width: 725px;
}

.product_frame {
	display: inline-block;
	margin: 0;
	padding: 0;
	width: 229px;
	height: 229px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.product_name {
	display: table;
	vertical-align: middle;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100px;
}

.product_name p {
	display: table-cell;
	vertical-align: middle;
	text-align: left;
	padding: 10px;
}

ul.list_product {
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

ul.list_product li {
	display: inline-block;
	margin: 8px;
	width: 229px;
	height: 329px;
	float: left;
	border: 1px solid #eeeeee;
	border-radius: 5px;
	position: relative;
}

ul.list_product li:nth-child(3n - 2) {
	margin-left: 0;
}

ul.list_product li:nth-child(3n) {
	margin-right: 0;
}