JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<div class="wrapper">
      <div class="bg">
        <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

.wrapper {
      text-align:center;
    }
    
    .bg {
      position: relative;
      display:inline-block;
      margin: 0 auto;
    }
    
    .bg img  {
      width:100%;
    }
    
    .text-box {
      position: absolute;
      z-index: 1;
      top: 20px;
      left: 20px;
    }