JSFiddle - React, Tailwind, and code Playground

by J R

HTML

<div class="row-hero-container">
  <div class="row-fluid row-hero">
  	<div class="video-holder gradient-overlay video-wrapper">
  		<video autoplay loop muted>
  			<source src="http://www.w3schools.com/tags/movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  			<source src="/resources/video/product-hero.webmhd.webm" type='video/webm; codecs="vp8, vorbis"' />
  			<img src="/images/product/product-parent-hero.jpg" title="Your browser does not support the <video> tag">
  		</video>
  	</div>
  </div>
 <!--     
   <div class="container row-hero-overlay text-center">
   		<div class="row">
   			<div class="col-md-12 row-hero-info">
   				<h1 class="row-hero-title">Headline in Video.</h1>
   			</div>
   		</div>
   </div>
-->
</div>
 <!--   <div class="container col-md-12 bg-primary"><br></div>-->
    
<div class="container">
  <div class="row row-about">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
  </div>
</div>

CSS

.row-hero {
  position: relative;
  width: 100%;
    margin-bottom:0%;
}
.row-hero-overlay {
  position: relative;
  z-index: 9999;
}
.row-hero-info {
  margin-top: 0%;
    margin-bottom:0%;
}
.row-hero-title {
  font-family: 'Muli', sans-serif !important;
  font-weight: 300;
  font-style: italic;
  font-size: 74px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.row-hero-description {
  font-size: 24px;
}
.row-hero-container {
  position: relative;
  color: #FFFFFF;
  z-index: 3 !important;
    margin-bottom:0%;
}
.row-hero-container video {
  position: relative;
  z-index: 0;
}
video {
  width: 100% !important;
  height: auto !important;
    margin-bottom:0%
}
.video-holder {
  position: relative;
  width: 100%;
  margin-bottom:0%; /* can use this to clear from below */
  top: 0;
  left: 0;
  opacity: 0.8;
}
@media (max-width: 1260px) {
  .video-holder video {
    height: 170%;
    width: 110%;
  }
}
.gradient-overlay:before {
  position: absolute;
  width: 100%;
  content: '';
  background: #e74c3c;
  opacity: 0.8;
  z-index: 2;
}
.hero {
  overflow: hidden;
  padding: 0;
  position: relative;
  height: 1500px;
}
.hero-video {
  position: absolute;
  top: 0;
}
.row-about {
  background-color: black;
  height: 500px;
  border-top: 2px solid grey;
  margin-top:1%; /* can use this to clear from above */
}
p {
  font-family: 'Lato', sans-serif !important;
  font-size: 16px;
}