JSFiddle - React, Tailwind, and code Playground

HTML

<figure class="banner">
  <img src="http://doc.jsfiddle.net/_downloads/jsfiddle-desktop-1440x900-a.png" />
  <figcaption>
    <p>TEXT</p>
    <h3>TÄ°TLE</h3>
    <p>TEXT</p>
    <a href="#">DETAIL</a>
  </figcaption>
</figure>

CSS

.banner{display:flex; overflow:hidden; justify-content:center; position:relative; width:350px;}
.banner figcaption{position:absolute; z-index:1; color:@white; text-align:center; width:90%; align-self:center; background:#f00;}