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>https://jsfiddle.net/khamer/u4xvn9e7/#

SCSS

* {
  box-sizing: border-box;
}

.hero {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr;
  grid-template-rows: 1fr;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  
  &__background,
  &__content {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    grid-row: 1;
    width: 100%;
  }
  
  &__content {
    font-size: 150%;
    z-index: 1;
    color: white;
    padding: 10vh 10vw;
  }
}