JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<div class="hero">
  <img class="hero__img" src="https://loremflickr.com/960/480/bananas" alt="">
  <div class="hero__content">
    <h1>Lorem ipsum dolor.</h1>
  </div>
</div>

SCSS

.hero {
  display: grid;
  grid-columns: 1fr;
  
  &__img,
  &__content {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    width: 100%;
    text-align: center;
    color: white;
  }
  
  &__img {
    object: fit;
  }
}