JSFiddle - React, Tailwind, and code Playground

by John

HTML

<div class="thumb">
    <a href="#"><img src="http://i.imgur.com/SU9tszi.jpg" /></a>
    <div>Product Title</div>
</div>

<div class="thumb">
    <a href="#"><img src="http://i.imgur.com/HbvFcoM.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;
    overflow: hidden;
}

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

.thumb div {
    padding: 10px;
}