JSFiddle - React, Tailwind, and code Playground

by yudizsolutions

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<section id="header">
  <div class="container-fluid edge">
    <div class="row justify-content-center">
      <div class="col-12">
        <nav class="navbar navbar-expand-lg navbar-dark">
          <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
              <div class="navbar-nav">
                <a class="nav-link" href="#">About</a>
                <a class="nav-link" href="#">Events</a>
              </div>
            </div>
          </div>
        </nav>
        <h1 class="overlay-title">This is the Overlay Title!</h1>
      </div>
    </div>
  </div>
  <video playsinline autoplay muted loop id="myVideo">
    <source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
  </video>
</section>
<section id="main_body">
  <div class="container-fluid edge">
    <div class="row justify-content-center animatedParent animateOnce top-row-padding" id="intro">
      <div class="col-9 animated fadeIn">
        <div class="test" title="404">
          <h1>So, who are we?</h1>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet varius augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam dignissim dictum quam at imperdiet. Ut mattis sed augue vitae imperdiet. Aenean cursus diam sed nulla pharetra, et mattis felis vehicula. Suspendisse vitae purus dolor. Aenean ut pretium...

CSS

#header {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

#header > * {
  position: relative;
  z-index: 2;
  color: #fff;
}

#header video {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  z-index: 1;
}