JSFiddle - React, Tailwind, and code Playground

by John

HTML

<div class="thumb">
    <a href="#"><img src="http://test.pillarsoflifebook.com/wp-content/uploads/2013/10/astoria_banquette_THUMB.jpg" /></a>
    <div>Product Title</div>
</div>

<div class="thumb">
    <a href="#"><img src="http://test.pillarsoflifebook.com/wp-content/uploads/2013/10/calypso_banquette_THUMB.jpg" /></a>
    <div>Product Title</div>
</div>

<div class="thumb">
    <a href="#"><img src="http://test.pillarsoflifebook.com/wp-content/uploads/2013/10/celeste-banquette-THUMB.jpg" /></a>
    <div>Product Title</div>
</div>

<div class="thumb">
    <a href="#"><img src="http://test.pillarsoflifebook.com/wp-content/uploads/2013/10/cityliving_banquette_THUMB.jpg" /></a>
    <div>Product Title</div>
</div>

CSS

div.thumb {
    float: left;
    border: 1px solid #ccc;
    width: 210px;
    margin-right: 10px;
}

.thumb a {
    display: block;
    width: 100%;
    height: 115px;
    line-height: 115px;
    overflow: hidden;
    text-align: center;
}

.thumb a img {
    max-width: 100%;
    vertical-align: middle;
}

.thumb div {
    padding: 10px;
    border-top: 1px solid #ddd;
    background: #f5f5f5;
    margin-top: 10px;
}