JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col span_4_of_12">
        <figure class="feature">
          <a href="#">
            <img src="http://via.placeholder.com/350x150" alt="shoes">
            <figcaption class="feature__caption">ACCESSORIES</figcaption>
          </a>
        </figure>
        <figure class="feature">
          <a href="#">
            <img src="http://via.placeholder.com/350x150" alt="shoes">
            <figcaption class="feature__caption">LATEST FASHION</figcaption>
          </a>
        </figure>
      </div>

CSS

.feature {
  margin: 0;
  position: relative;
  margin: 10px 0;
}

.feature__caption {
  position: absolute;
  bottom: 5px;
  color: #c158ad;
  text-align: center;
  width: 100%;
  font-size: 1.5em;
  padding: 2% 0;
  right: 0;
  left: 0;
}