JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div>
    <p>Road to Heaven</p>
  </div>
  <div>
    <p>Road to Heaven</p>
  </div>
  <div>
    <p>Road to Heaven</p>
  </div>
</div>

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap:5px;
  height: 50vw;
}

.container > div {
  background: url("https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1545&q=80") center/cover;
  display:flex;
}

p {
  font-size: 2vw;
  padding: 20px;
  flex-grow:1;
  background-color: #000000b5;
  border: 1px solid #ffffff;
  border-radius: 15px;
  color: white;
  text-shadow: 0px 1px #eff1f4;
  text-align:center;
  margin:0 0 auto;
}

.container > div:nth-child(2)  p {
    margin:auto 0;
}
.container > div:nth-child(3)  p {
    margin:auto 0 0;
}