JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<header>
		</header>
		<section>
			<article>
				<h1>Hello World!</h1>
			</article>
		</section>
	</body>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

html, body {
	position: relative;
	font-family: 'Open Sans', sans-serif;
	height: 100%;
	margin: 0;
	background-color: #f5f5f5;
	color: #222;
}

header {
	position: relative;
	width: 100%;
	height: 60%;
	background-image: url('https://d262ilb51hltx0.cloudfront.net/fit/t/1400/1120/gradv/29/81/55/1*_K69BamW07ylTyiX49SWBw.jpeg');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

header::before {
	position: absolute;
	content: '';
	pointer-events: none;
    
	left: 50%;
	top: 100%;
	width: 50px;
	height: 50px;
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	transform: translateX(-50%) translateY(-50%) rotate(45deg);

	background-image: url('https://d262ilb51hltx0.cloudfront.net/fit/t/1400/1120/gradv/29/81/55/1*_K69BamW07ylTyiX49SWBw.jpeg');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

header .title {
	position: absolute;
	color: #f5f5f5;
	font-weight: 800;
	font-size: 2.5em;
	bottom: 0px;
	padding: 5% 20%;
}

section {
	width: 100%;
}

article {
	padding: 5% 20%;
}