JSFiddle - React, Tailwind, and code Playground

by PaulvdDool

HTML

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

CSS

.banner {
  /* Aligning figcaption to the center horizontally and vertically with flexbox */
  display: flex;
  justify-content: center;
  align-items: center;
  
  overflow: hidden; /* Prevent image from overflowing banner. */
  position: relative; /* Set to relative so absolute positioning of child elements is possible */
  
  /* In your original example, the image determined the height of the banner. In this example you have to set an height yourself, because it won't take the height */
  height: 600px;
  width: 350px;
}

.banner img {
  position: absolute; /* Position absolute so it won't push the figcaption outside the banner.*/
  z-index: 0; /* Place below figcaption */
}

.banner figcaption {
  display: table; /* prevent figcaption filling full height of banner */
  position: relative; /* set to relative so z-index can be applied */
  width: 90%;
  z-index: 1; /* place on top of image */
}
.banner figcaption p, h3, a {
  background-color: red;
  line-height: 40px;
  margin: 0;
  text-align: center;
  width: 100%;
  display: block; /* so <a> element listens to width:100% */
}