JSFiddle - React, Tailwind, and code Playground

by robulus

HTML

<main>
  
  <div class="section1">
    <div class="background-video">
      <video src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" autoplay></video>
    </div>
    <div class="textbox">
      <div class="textboxcontent"> 
        <h2>Welcome</h2>
      </div>
    </div>
  </div>
  
  
  <div class="relative">
    <div class="animation">
      <img src="https://www.webkit.org/blog-files/acid3-100.png" alt="">
    </div>
    <div class="frame">
      <div class="section2">
        <h2>Section 2</h2>
        <p>example text</p>
      </div>
    </div>
  </div>
  
    <div class="relative2">
    <div class="frame">
      <div class="section3">
        <h2>Section 3</h2>
        <p>example text</p>
      </div>
    </div>
  </div>
  
      <div class="relative3">
        <div class="frame">
          <div class="section4">
            <h2>Section 3</h2>
            <p>example text</p>
          </div>
        </div>
      </div>
  
  
        <div class="relative4">
        <div class="frame">
          <div class="section5">
            <h2>Section 4</h2>
            <p>example text</p>
          </div>
        </div>
      </div>
  
  
</main>

CSS

h2 {
  margin: 0;
}

.section1 {
  position: relative;
  z-index: 100;
  background-color: lightgray;
}

/** Section 1 **/
.textbox {
  position: absolute;
  z-index: 100;
  text-align: center;
  top: 300px;
  left: 0%;
  right: 0%;
}

.textboxcontent {
  position: relative;
  margin-bottom: 25px;
  font-family: 'Roboto', sans-serif;
  padding-left: 15px;
  padding-right: 15px;
  opacity: 0.8;
  font-weight: normal;
}
.background-video {
   overflow: hidden;

}
.background-video video {
  height: 100%;
  width: 177.77777778vh;
  min-width: 100%;
  min-height: 56.25vw;
  object-fit: cover;
  opacity: 0.3;
}


/** Section 2 **/
.relative {
  position: relative;
  background-color: orange;
  margin-top: -4px;
}

.frame {
  width: 400px;
  margin: 0 auto;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.section2 {
  min-height: 50vh;
}

/** Section 3 **/
.relative2 {
  position: relative;
  background-color: yellow;
}
.section3 {
  min-height: 50vh;
}

/** Section 3 **/
.relative3 {
  position: relative;
  background-color: purple;
}
.section4 {
  min-height: 50vh;
}

/** Section 4 **/
.relative4 {
  position: relative;
  background-color: pink;
}
.section5 {
  min-height: 50vh;
}

.animation {
  width: 200px;
  height: 150px;
  position: fixed;
  right: 0;
  top: 300px;
  z-index: 0;
}

.animation img {
  width: 100%;
  height: 100%;
}