JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="img-wrapper">
    <div class="text-box">
      <p>lorem ipsum</p>
      <p>lorem ipsum</p>
    </div>
    <a href="https://placeholder.com">
      <img src="http://via.placeholder.com/770x690">
    </a>
  </div>
</div>

CSS

html,
body,
.wrapper {
  /* stopping overflow - just for example */
  height:100%;
  text-align: center;
}

.wrapper .img-wrapper  {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.wrapper img {
  z-index:1;
  
  /* stopping overflow - just for example */
  max-height:100%;
  width:auto;
  max-width:100%;
}

.text-box {
  z-index: 2;
  position: absolute;
  top: 20px;
  left: 20px;
}