JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="examples">

  <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 class="example__img" style="background-image: url(https://placebear.com/300/300)"></div>
    </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>

SCSS

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