JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div class="inner">
    <div class="big-logo"><img alt="Dry" src="http://lorempixel.com/output/cats-q-c-640-480-3.jpg" /></div>
    <div class="main-text"><p>big header description text goes here just wrote a quick sentence.</p></div>
    <div class="description"><p>This is the description text, please read and enjoy.</p></div>
    <div class="button-container"><a class="scroll button" href="#contact">GET IN TOUCH</a></div>
  </div>
</div>

CSS

* {
	margin:0;
	padding:0;
}
html {
	width: 100%;
	height: 100%;
	background-size: cover;
	overflow-y: scroll;
	font-family: 'Helvetica Neue', sans-serif;
	font-size: 2em;
}
body {
    height: 100%;
	width:100%;
    background-color: #000;
}
#container {
	width: 100%;
	height: 100%;
	background:#59488b;
}
.inner {
	height:100%;
	width:100%;
	text-align:center;
	background:green;
}
.main-text {
  position: relative;
  top: 50%;
  	-webkit-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
	background:#433669;
	font-size:100%;
	text-transform: uppercase;
}
.description {
  position: absolute;
  top: 70%;
  left:50%;
	background:red;
	font-size:50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
  	-ms-transform: translateY(-50%) translateX(-50%);
  	transform: translateY(-50%) translateX(-50%);
}
.button-container {
  position: absolute;
  top: 90%;
  left:50%;
  font-size:18px;
	background:blue;
	-webkit-transform: translateY(-50%) translateX(-50%);
  	-ms-transform: translateY(-50%) translateX(-50%);
  	transform: translateY(-50%) translateX(-50%);
}
.big-logo {
	max-width:auto;
    height:auto;
  position: absolute;
  top: 20%;
  left:50%;
  font-size:18px;
	background:blue;
	-webkit-transform: translateY(-50%) translateX(-50%);
  	-ms-transform: translateY(-50%) translateX(-50%);
  	transform: translateY(-50%) translateX(-50%);
}

.big-logo img {
    width:100% !important;
    height:100% !important;
    display:block;
}

JavaScript

jQuery(document).ready(function($) {
	
	var resizeText = function () {
		// Standard height, for which the body font size is correct
		var preferredFontSize = 180; // %
		var preferredSize = 1024 * 768;

		var currentSize = $(window).width() * $(window).height();
		var scalePercentage = Math.sqrt(currentSize) / Math.sqrt(preferredSize);
		var newFontSize = preferredFontSize * scalePercentage;
		$("body").css("font-size", newFontSize + '%');
	};

	$(window).bind('resize', function() {
		resizeText();
	}).trigger('resize');

});