JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<div class="content-wraper">
  <div class="img-wraper">
    <img class="img" src="https://www.askideas.com/media/24/Cute-Little-Manx-Kitten-Sitting.jpg" alt="">
    <div class="text-wrapper">
      <h3>&nbsp;Title<br>&nbsp;bio<br>&nbsp;desc<br>&nbsp;bio<br>
        <p style="margin-left: 90%;">date&nbsp;</p>
      </h3>
    </div>
  </div>
</div>

CSS

.content-wraper{
    width: 80%;
    margin: 4% 10% 5% 10%;
}
  .img-wraper{
    position: relative;
    line-height: 0;
  }

    .img{ 
        width: 100%;
    }

    .text-wrapper{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        line-height: normal;
    }

      .text-wrapper h3 {
          font-size: 100%;
          color: white;
          background-color: black;
          opacity: 0.5;
          text-align: left;
          margin:0;
      }
      .text-wrapper p {
          margin:0;
      }