JSFiddle - React, Tailwind, and code Playground

HTML

<div class="offer">
    <h3><a href="/category/the-new-ipad">The New iPad</a></h3>
    <p>Currently only &euro; 199,-</p>
    <img src="http://lorempixel.com/200/200/technics/" alt="The New iPad" />
</div>

CSS

.offer { position: relative; padding-bottom: 50px; display: block; }
.offer h3 { position: absolute; top: 0px; left: 0px; display: block;  z-index: 2; }
.offer h3 a { padding: 200px 0px 0px 0px; width: 200px; height: 50px; line-height: 30px; text-align: center; font-weight: bold; display: block; }
.offer p { position: absolute; bottom: 0px; left: 0px; width: 200px; height: 20px; line-height: 20px; text-align: center; display: block; background-color: blue; color: #fff; z-index: 1; }