JSFiddle - React, Tailwind, and code Playground

HTML

<a class="thumbnail text-center" href="#">
    <div class="caption">
        <h3>Potato</h3>
        <p>Some short description of what this exact potato really is about.</p>
    </div>
</a>

CSS

.thumbnail {
    position:relative;
    width: 150px;
	display:block;
	padding:4px;
	margin-bottom:20px;
	line-height:1.42857143;
	background-color:#fff;
	border:1px solid #ddd;
	border-radius:4px;
	-webkit-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out
}
.thumbnail>img,.thumbnail a>img {
	margin-left:auto;
	margin-right:auto
}
a.thumbnail:hover,a.thumbnail:focus,a.thumbnail.active {
	border-color:#428bca
}
.thumbnail .caption {
	padding:9px;
	color: #333
}
a:link {
text-decoration:none;
cursor:pointer;
}