JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="mcontainer">
    	<section id="header" class="arrows" style="padding:280px 0px">
            <header style="padding-bottom:96px;">
                <h1>Mobile Paint Solutions</h1>
                <p>Since 1980</p>
            </header>
            <footer>
            	<a href="" class="button white">About Us</a>
            </footer>
        </section>
        
        <!-- Later use PHP to load these sections, content may be changed -->
        <section id="banner" class="arrows">
            <header>
            	<div>
                    <h1>About Us</h1>
                    <p>We are a proud company and have been providing a superb service for many years. You may read some of our reviews or sumbmit your own below! </p>
                </div>
            </header>
            <footer>
            	<a href="#banner" class="button white">Our Reviews</a>
            </footer>
        </section>
        <div class="stagger_reviews">
        <!-- Later use PHP to load reviews, CSS should switch the images from left to right -->
            <article class="container box style1">
                <a style="background-image:url(http://pixelarity.com/items/demos/overflow/green/images/pic01.jpg); " href="#" class="image fit"></a>
                <div class="inner">
                	<header>
                    	<h2>Martyn Ball</h2>
                    </header>
                    <p>
                    	I found this service on a Google Search, didn't expect it to be so great!
                    </p>
                </div>
            </article>
            
            <article class="container review style1">
                <a style="background-image:url(http://pixelarity.com/items/demos/overflow/green/images/pic01.jpg); " href="#" class="image fit"></a>
                <div class="inner">
                	<header>
                    	<h2>Remember</h2>
                    </header>
                    <p>
                    	Add setting so...

CSS

body {
		text-align:center;
		font-family:'Source Sans Pro', sans-serif;
		letter-spacing: 1px;
		background-image:url(http://pixelarity.com/items/demos/overflow/green/images/bg.jpg);
		padding:0px;
		margin:0px;
		color:#3a3939;
	}
	header { margin-bottom: 1em; }
	header p { margin-top:0.5em; }
	* { 
		margin:0; 
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	*:before, *:after {
		box-sizing: border-box;
	}
	h1, h2, h3, h4, h5, h6 {
		font-weight:400;
		text-transform:uppercase;
		line-height:1.75em;	
	}
	h2 {
		font-size:21px;
		letter-spacing:8px;	
	}
	div { display:block; }
	
	/* Header and Title Styles */
	#header {
		display:inline-block;
		text-transform:uppercase;
		color:#FFF;
		cursor:default;
		text-align: center;
		position:relative;
	}
	#header header p:before {
		content: '';
		display: block;
		border-top: solid 1px rgba(255, 255, 255, 0.5);
		margin: 4px 0 0.8em 0;
	}
	#header header p {
		border-top:solid 1px rgba(255, 255, 255, 0.5);
		letter-spacing:3px;
		text-transform:uppercase;
		font-size:1em;
		margin-top:1em;	
	}
	#header footer {
		position:absolute;
		bottom:12em;
		margin:0;
		width:100%;
	}
	#header h1 {
		font-size:2.5em;
		font-weight:bold;
		letter-spacing:3px;
	}
	/* section[class*=arrows]:before */
	#header footer:before {
		content: '';
		display:block;
		width:90px;
		height:66px;
		position:absolute;
		left:50%;
		margin-left:-45px;
		margin-top:100px;
		background:url(images/arrow.svg);			
	}
	#header footer:after {
		content: '';
		display:block;
		position:absolute;
		left:50%;
		top:42px;
		height:173px;
		border-left:solid 1px #FFF;
	}
	/* Header and Title Styles END */
	
	/* Button Styles */
	.button {
		padding:1em 3em;
		border-radius:3em;
		border:1px solid #FFF;
		background-color:#FFF;
		color:#000;
		text-decoration:none;
		font-weight:400;
		font-size:18px;
		position: relative;
	}
	/* Button Styles END */
	
	/* Section Styles */
	#banner...

JavaScript

function doc(id) { return document.getElementById(id); }

window.onresize = function(event) {
	//Detect window size and make new padding
	var newPadding = parseInt(window.innerHeight)/2.8;
	newPadding = newPadding.toFixed(0);
	var limitPadding = 221;

	//Apply new padding value to header
	if (newPadding > limitPadding) {
		doc("header").style.padding = newPadding + "px 0px";
	}
}