JSFiddle - React, Tailwind, and code Playground

by Chris Buttery

HTML

<div class="tile photo-with-title">
  <div class="align-middle">
    <div class="align-middle__content">
      <strong>Provident commodi et corrupti velit eos. Provident commodi et corrupti velit eos Provident commodi et corrupti velit eos. Provident commodi et corrupti velit eos. Provident commodi et corrupti velit eos Provident commodi et corrupti velit eos.</strong>
    </div>
  </div>
</div>

CSS

.tile {
  position: relative;
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: 0 0 9px -3px rgba(0,0,0,0.3);
  color: #000;
  width: 300px;
  height: 400px;
  overflow: hidden;
  padding: 30px;
}

.photo-with-title strong {
  font-size: 40px !important;
  font-size: 2.5rem !important;
  line-height: 48px !important;
  line-height: 3rem !important;
  background-color: #0076de !important;
  box-shadow: 10px 0 0 #0076de,-10px 0 0 #0076de !important;
  color: #fff !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  padding: 0;
  -webkit-box-decoration-break: clone !important;
  box-decoration-break: clone !important;
  display: inline;
}

.align-middle {
  display: table;
}

.align-middle__content {
  vertical-align: middle;
  margin-top: -2px; 
    display: table-cell;
}