JSFiddle - React, Tailwind, and code Playground

by l2banners

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">


<div class="row">
  <div class="col">
    <img src="https://images.unsplash.com/photo-1568342015921-5cb045444805?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
    <h2 class="title">Hello</h2>
    <p>World</p>
  </div>
  <div class="col">
    <img src="https://images.unsplash.com/photo-1567440785091-326e96c429ea?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
    <h2 class="title">Hello</h2>
    <p>World</p>
  </div>
  <div class="col">
    <img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
    <h2 class="title">Hello</h2>
    <p>World</p>
  </div>
</div>

CSS

img {
  max-width: 100%;
}

.row {
  display: flex;
}

.col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  margin-top: auto;
}