JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item">
		<div class="productpiccontainer">
		<img src="http://imageshack.us/a/img850/1646/pu9p.jpg" />
		</div>		
						
		<p>hhghfghhsd</p>
		<p>hgfhfghhfghfgh</p>										
    </div>

CSS

.item {
    width: 32%;
    text-align: center;
    border: 1px solid #D9D9D9;
    padding: 0px;
    list-style: none;
    float: left;    
    margin-right: 10px;
    margin-bottom: 15px;
    border-radius: 10px;
    -moz-border-radius: 10px; /* firefox rounded corners */
    -webkit-border-radius: 10px; /* Safari rounded corners */
    min-height: 420px;
}
.item a:link {
	color: #4180C5;
	text-decoration: none;
	outline: none;
}
.item a:visited {
	color: #4180C5;
	text-decoration: none;
	outline: none;
}
.item li h1 {
text-align:center:
}

.item li#white{
    min-height: 220px;
}
.productpiccontainer {
	width: 100%;
	height: 100%;
	border: 1px solid #D9D9D9;
	min-height: 350px;
	max-height: 350px;
}
.sizedimg {
	max-width:100%;
	max-height:100%;
}