JSFiddle - React, Tailwind, and code Playground

by Todd Padwick

HTML

<div class="outer">
  <div class="image">
  </div>
  <div class="caption">
    <div class="block">
      Lorem ipsum dolar sit amet consectetur idipiscine ipsumd lorem ipsum dolar sit amet.
    a</div>
  </div>
</div>
<div class="outer">
  <div class="image">
  </div>
  <div class="caption">
    <div class="block">
      Lorem ipsum dolar sit amet consectetur idipiscine ipsumd lorem ipsum dolar sit amet.
    a</div>
  </div>
</div>
<div class="outer">
  <div class="image">
  </div>
  <div class="caption">
    <div class="block">
      Lorem ipsum dolar sit amet consectetur idipiscine ipsumd lorem ipsum dolar sit amet.
    a</div>
  </div>
</div>

CSS

.outer {
  display:block;
  position:relative;
  width:320px;
  margin-bottom:24px;
}

.image {
  background-color:blue;
  width:320px;
  height:500px;
  display:block;
  position:relative;
  border-radius:5px;
}

.caption {
  display:block;
  position:relative;
  margin-top:-40px;
  
}

.block {
 margin-right:25%;
 margin-left:5%;
  position:relative;
  background-color:#FFFFFF;
  padding:24px;
  line-height:24px;
}