JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="boxes">
<li>
    <div class="houseImage"><img src="http://media-cdn.tripadvisor.com/media/photo-s/02/40/a0/68/puddicombe-house.jpg" /></div>
    <div class="titlebox">Circa 1930 on the River</div>
       <div class="locationbox">Lawrencetown</div>
     <div class="pricebox">Offered at $249,000</div>
</li>
<li>
     <div class="houseImage"> <img src="http://cdn.freshome.com/wp-content/uploads/2009/06/Hello-Kitty-House-

in-Shanghai-1.jpg" /></div>
    <div class="titlebox">7 Acre Modern Farmstead</div>
       <div class="locationbox">Medford</div>
     <div class="pricebox">Offered at $328,000</div>
</li>
<li>
 <div class="houseImage"><img src="http://3.bp.blogspot.com/-

yH_JiiSFchI/UBm6HnFF6cI/AAAAAAAAh4E/LXhtqX39h0E/s1600/DIY+Blogger+House+Daybreak.jpg" /></div>
    <div class="titlebox">5 Acre River Front Property With Contemporary Home</div>
       <div class="locationbox">Medford</div>
     <div class="pricebox">Offered at $435,000</div>
</li>
</ul>

CSS

ul.boxes{
	width: 100%;
    display: inline-block;
    margin-left: 10%;
	margin-right: 10%;

}
ul.boxes li{
	list-style-type: none;
	float: left;
	width: 25%;
	height: 400px;
	color: #000000;
	border: 1px groove #F8F8F8;
	margin-top: 1%;
	margin-right: 2%;
	margin-bottom: 1%;
	overflow: hidden;
	background-color: #DAFBCA;
}


ul.boxes li img{
	text-align: center;
	overflow: hidden;
	height: 230px;
	width: 80%;
    height: auto;
}

ul.boxes img{
	height: 10px;
}

.titlebox{
	width: 80%;
	 display: inline-block;
	 font-size: 17px;
    font-size: 1.9vw;
    margin-left: 10%;
	margin-right: 10%;
    line-height: 100%;

    font-family: Garamond;
    color: #002000;
    text-align: center;
    height: 20%;

}

.locationbox{

	width: 100%;
	 display: inline-block;
	 font-size: 25px;
    line-height: 100%;
    
    font-family: Garamond;
    color: #002000;
    font-style: italic;
    text-align: center;
    height:20%;
}

.pricebox{
	
	position:relative;
   bottom:0;
   width: 100%;
	 font-size: 32px;
    line-height: 100%;
    text-align: center;
    font-family: Garamond;
    color: #002000;
    height: 20%;
}

.houseImage
{
    margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 5px;
    height: 36%;
}