JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html><head>
<meta charset="utf-8">
<title>UWDES</title>
<body>
<header>
<!-- VideoBG -->
<video autoplay loop muted poster="https://cs7063.vk.me/c540107/v540107146/19276/fgSD2fa05Qk.jpg" id="video-on-bg">
    <source src="video/back.mp4" type="video/mp4">
</video>
<!--[if lt IE 9]>
<script>
    document.createElement('video');
</script>
<![endif]-->
<!-- / VideoBG -->
<center>
<h1>Создание сайтов в СНГ</h1>
<h2>Вы готовы вывести свой бизнес на новый уровень?</h2>
<button></button>
</center>
</header>
<div class="p1">
	<h3>
    	О нас
    </h3>
    <center>
    	 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        
    <div id="p1" class="about">
    	<img src="https://cs7058.vk.me/c540105/v540105353/2c8ae/yAHgG4XQjGo.jpg"/>
        <h4>Уникальный дизайн</h4>
        <a>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        </a>
    </div>
     <div id="p2" class="about">
    	<img src="https://cs7058.vk.me/c540105/v540105353/2c8ae/yAHgG4XQjGo.jpg"/>
        <h4>Уникальный дизайн</h4>
        <a>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  
        </a>
    </div>
     <div id="p3" class="about">
    	<img src="https://cs7058.vk.me/c540105/v540105353/2c8ae/yAHgG4XQjGo.jpg"/>
        <h4>Уникальный дизайн</h4>
        <a>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        </a>
    </div>
     <div id="p4" class="about">
    	<img src="https://cs7058.vk.me/c540105/v540105353/2c8ae/yAHgG4XQjGo.jpg"/>
        <h4>Уникальный дизайн</h4>
        <a>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        </a>
    </div>
   ...

CSS

@font-face {
    font-family: g7; /* Имя шрифта */
    src: url(/font/g7.ttf); /* Путь к файлу со шрифтом */
}
html, body{
	margin:0;
	padding:0;
	font-family:g7;
	font-size:1.5vw;
	}
a:link, a:visited{
	color:#fff;
	text-decoration:none;
	}
header{
	width:100%;
	height:40vw;
	color:#fff;
	position:relative;
	border-top:1px solid #000000;
	box-shadow: 0 0 3vw 1vw #000;
	background:rgba(0,0,0,0.50)
	}
header center{
		margin-top:10vw;
		height: 20vw;
	}
button{
	cursor:pointer;
	}
header button{
	background:#00D3FF;
	border:none;
	border-radius:1vw;
	width:35vw;
	height:7vw;
	font-size:3vw;
	padding:1vw 5vw 1vw 5vw;
	background: url(/img/but.gif) center center no-repeat;
	-webkit-background-size: cover;
           -moz-background-size: cover;
            -ms-background-size: cover;
             -o-background-size: cover;
                background-size: cover;
	color:#fff;
	}
h1{
	font-size:5vw;
	}
h2{
	font-size:3vw;
	}
h3{
	font-size:3vw;
	text-decoration:underline;
	text-align:center;
	}
h4{
	font-size:2vw;
	margin:0.2vw 0;
	}

video { display: block; }
header video#video-on-bg {
        background:url('https://cs7063.vk.me/c540107/v540107146/19276/fgSD2fa05Qk.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
           -moz-background-size: cover;
            -ms-background-size: cover;
             -o-background-size: cover;
                background-size: cover;
        width: auto;
        height: auto !important;
        width:100%;
        height:30vw;
        position:absolute;
        left: 0; 
        bottom: 0; 
        z-index: -998;
		box-shadow: inset 0 0 3vw 1vw #000;
    }

.p1{
	height:80vw;
	background:rgb(250,250,250);
	}
.p1 center{
		width:80%;
		margin:0 auto;
	}
	
.about{
	width:30%;
	text-align:center;
	margin: 5vw 1vw 0 10vw;
	font-size:1vw;
	float:left;
	height:20vw;
	opacity:0;
	}
#p3, #p4{
	margin-right:0;
	}
.about img{
	width:10vw;
	height:10vw;
	}

footer{
	height:...

JavaScript

var nav;
var fix = false;
var pg1 = false;
$(function() {
    		nav = $("nav").offset().top;
			scrols();
});
$(document).scroll(function(){
	scrols();
	});
function scrols(){
	scrl = $(document).scrollTop();
		if(scrl+300 >= $(".p1").offset().top && !pg1){
			pg1 = true;
			p1();
		}
		if(scrl > nav && !fix){
			fix = true;
			$("nav").addClass("fixed");
		}else if(scrl <= nav && fix){
			fix = false;
			$("nav").removeClass("fixed");
		}
	}
function p1() {
      $('.about').each(function(i) {
    		$(this).delay((i++) * 200).fadeTo(1000, 1); })
}
/*$(function() {
      $('.about').each(function(i) {
    		$(this).delay((i++) * 500).fadeTo(1000, 1); })
}); 
*/