JSFiddle - React, Tailwind, and code Playground

by PaulvdDool

HTML

<figure class="banner">
  <figcaption>
    <p>TEXT</p>
    <h3>TITLE</h3>
    <p>TEXT</p>
    <a href="">DETAIL</a>
  </figcaption>
</figure>

CSS

.banner {
  /* Setting image as background */
  background-image: url('http://doc.jsfiddle.net/_downloads/jsfiddle-desktop-1440x900-a.png');
  background-position: 50% 50%;
  background-size: cover;

  /* Aligning figcaption to the center horizontally and vertically with flexbox */
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* In your original example, the image determined the height of the banner. In this example you have to set an height yourself. */
  height: 600px;
  width: 350px;
}

figcaption {
  display: table; /* prevent figcaption filling full height of banner */
  width: 90%;
}
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% */
}