JSFiddle - React, Tailwind, and code Playground

by fuggfuggfugg

HTML

<div class="pattern-bg1"></div>
<video id="gfyVid1" class="gfyVid" autoplay="" loop="" muted="muted" style="display: block;" poster="//thumbs.gfycat.com/GentleGiantBarasingha-poster.jpg">
    <source id="webmsource" src="//zippy.gfycat.com/GentleGiantBarasingha.webm" type="video/webm">
        <source id="mp4source" src="//fat.gfycat.com/GentleGiantBarasingha.mp4" type="video/mp4">Sorry, you don't have HTML5 video and we didn't catch this properly in javascript. You can try to view the gif directly: <a href="http://giant.gfycat.com/GentleGiantBarasingha.gif">http://giant.gfycat.com/GentleGiantBarasingha.gif</a>.</video>

CSS

.gfyVid,
.pattern-bg {
  position: fixed;
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto;
  z-index: -100;
}

.pattern-bg{
 z-index: -99; 
    background-color: rgba(0,0,0,0.35);
background-image: url(http://www.transparenttextures.com/patterns/bright-squares.png);
}

.pattern-bg1 {
background: url(https://i.imgur.com/DTL56Ln.png) repeat;
width: 100%;
height: 100%;
position: fixed;
z-index: -80;
top: 0;
}