JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="example">
  <div class="example__bg" style="background-image: url(https://placebear.com/300/300)"></div>
  <div class="example__content">
    <h1>Lorem ipsum dolor.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, illum.</p>
  </div>
</div>

<div class="example">
  <div class="example__bg -faded" style="background-image: url(https://placebear.com/300/300)"></div>
  <div class="example__content">
    <h1>Lorem ipsum dolor.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, illum.</p>
  </div>
</div>

SCSS

.example {
  display: grid;
  align-items: center;
  justify-items: center;
  color: white;
  
  &__bg,
  &__content {
    grid-area: 1 / 1;
  }
  
  &__bg {
    background-position: center;
    align-self: stretch;
    justify-self: stretch;
    background: center/cover no-repeat;
    
    &.-faded {
      opacity: .999;
    }
  }
}