JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="hero">
  <video class="hero__background" autoplay loop muted playsinline src="https://ak.picdn.net/shutterstock/videos/1013935913/preview/stock-footage-gray-calm-street-cat-relaxing-in-a-golden-rays-of-shining-sun-at-the-old-europe-city-barcelona.mp4"></video>
  <div class="hero__content">
    <h1>Cat cat cat</h1>
    <p>Nap all day touch my tail, i shred your hand purrrr scratch the furniture, scratch the furniture but lick the other cats yet hit you unexpectedly.</p>
  </div>
</div>

SCSS

* {
  box-sizing: border-box;
}

.hero {
  display: grid;
  align-items: end;
  
  &__background,
  &__content {
    grid-area: 1 / 1;
    width: 100%;
  }
  
  &__content {
    font-size: 150%;
    z-index: 1;
    color: white;
    padding-left: 50%;
  }
}