JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

<div class="background">
  <video autoplay loop>
            <source src="http://res.cloudinary.com/dpie9jrze/video/upload/v1466588584/earth3_mq3lqc.mp4" type="video/mp4">
        </video>
  <img src="http://res.cloudinary.com/dpie9jrze/image/upload/v1466588406/bottom_video_jmrwpy.jpg">
</div>
<div class="main">
  <div class="content">
  Lorem ipsum dolomaximus efficitur id quis dolor. Sed in aliquet piscing elit. Donec ultricies, quam vel viverra faucibus, lorem eros maximus diam, ut placerat augue ante vel odio. Nunc et augue a
    Lorem ipsum dolomaximus efficitur id quis dolor. Sed in aliquet piscing elit. Donec ultricies, quam vel viverra faucibus, lorem eros maximus diam, ut placerat augue ante vel odio. Nunc et augue a  Lorem ipsum dolomaximus efficitur id quis dolor. Sed in aliquet piscing elit. Donec ultricies, quam vel viverra faucibus, lorem eros maximus diam, ut placerat augue ante vel odio. Nunc et augue a  Lorem ipsum dolomaximus efficitur id quis dolor. Sed in aliquet piscing elit. Donec ultricies, quam vel viverra faucibus, lorem eros maximus diam, ut placerat augue ante vel odio. Nunc et augue a  Lorem ipsum dolomaximus efficitur id quis dolor. Sed in aliquet piscing elit. Donec ultricies, quam vel viverra faucibus, lorem eros maximus diam, ut placerat augue ante vel odio. Nunc et augue a  Lorem ipsum dolomaximus efficitur id quis dolor. Sed in aliquet piscing elit. Donec ultricies, quam vel viverra faucibus, lorem eros maximus diam, ut placerat augue ante vel odio. Nunc et augue a  Lorem ipsum dolomaximus efficitur id quis dolor. Sed in aliquet piscing elit. Donec ultricies, quam vel viverra faucibus, lorem eros maximus diam, ut placerat augue ante vel odio. Nunc et augue a  Lorem ipsum dolomaximus efficitur id quis dolor. Sed in aliquet piscing elit. Donec ultricies, quam vel viverra faucibus, lorem eros maximus diam, ut placerat augue ante vel odio. Nunc et augue a  Lorem ipsum dolomaximus efficitur id quis dolor. Sed in aliquet piscing elit....

CSS

html, body {
  margin: 0;
  height: 100%;
}
.background {
  width: 100%;
  margin: 0;
  position: absolute;
  z-index: -1;
}
img {
  display: block;
  width: 100%;
  min-height: 650px;
  object-fit: cover;
}
video {
  width: 100%;
  min-height: 870px;
  object-fit: cover;
  vertical-align: top;
}
.main {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.footer {
  width: 100%;
  padding: 20px;
  background-color: rgba(222,211,111,0.5);
}