JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <div class="image">
        <img src="http://www.placehold.it/200" />
         <h1>Title</h1>

         <h2>Price</h2>

    </div>
    <div class="image">
        <img src="http://www.placehold.it/200" />
         <h1>Title</h1>

         <h2>Price</h2>

    </div>
    <div class="image">
        <img src="http://www.placehold.it/200" />
         <h1>Title</h1>

         <h2>Price</h2>

    </div>
    <div class="image">
        <img src="http://www.placehold.it/200" />
         <h1>Title</h1>

         <h2>Price</h2>

    </div>
</div>

CSS

#wrap {
    width: 440px;
    margin: 0 auto;
}
.image {
    float: left;
    margin: 10px;
    position: relative;
}
.image h1 {
    position: absolute;
    top: 0;
    text-align: center;
    width: 200px;
}
.image h2 {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 200px;
}