JSFiddle - React, Tailwind, and code Playground

HTML

<div class="units-container" style="overflow: hidden;">
    <div id="home" class="section">
        <div id="home-content">
            <section id="intro">
                <section>
                    <h3>Lorem Ipsum Dolor Amet (and some other latin things too)</h3>
                </section>
        </div>
    </div>
    <div id="portfolio"></div>
    <div id="about"></div>
    <div id="blog"></div>
    <div id="contact"></div>
</div>

CSS

#home {
    background-color: #1a1a1a;
    color: #fff;
}
.section {
    padding: 0;
    margin: 0;
    display: block;
    overflow: hidden;
}
#home #home-content {
    vertical-align: middle;
    text-align: center;
}
#intro {
    width: 60%;
    margin: 0 auto;
}
#home-content h3 {
    font-family:'amblelight_condensed', 'Courier';
    display: block;
    color: #fff;
    font-size: 2.17em;
    line-height: normal;
}

JavaScript

jQuery(document).ready(function ($) {

    /*--------------------------
	Resize Div(s) when Window Resizes
	---------------------------*/

    $(".section").css("height", $(window).height());
    $(".section").css("width", $(window).width());
    $(window).resize(function () {
        $('.section').css('height', $(window).height());
        $(".section").css("width", $(window).width());
    });
});