JSFiddle - React, Tailwind, and code Playground

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>

CSS

.outer {
  display:block;
  position:relative;
  width:320px;
}

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

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

.block {
  position:relative;
  background-color:#FFFFFF;
  padding:24px;
  line-height:24px;
  bottom: -50%;
  transform: translateY(-50px);
  width: 60%;
  border-radius: 5px;
  margin: 0 auto;
}