JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://enhanceddd.com/css/bootstrap.min.css">
<script src="http://enhanceddd.com/java/jquery.js"></script>
<script src="http://enhanceddd.com/images/logo500-transparent.png"></script>
<script src="http://enhanceddd.com/images/to-the-articles.png"></script>
   
    <body>
        <div class="slider">
            <!--Landing Page-->
            <div class="slide active-slide landing">
                <div class="container">
                    <div class="row">
                        <div class="logo col-xs-6 col-xs-offset-3">
                            <img class="img-logo" src="images/logo500-transparent.png" alt="Chasing ED" />
                        </div>
                        <div class="continue col-xs-2 col-xs-offset-1 col-">
                            <img class="to-the-articles" src="images/to-the-articles.png" alt="To the Articles! ->" />
                        </div>
                    </div>
                </div>
            </div>
            <!--Homepage-->
            <div class="slide home">
                <div class="container">
                    <div class="row">
                        <div class="logo col-xs-6 col-xs-offset-3">
                            <img class="img-logo" src="images/logo500-transparent.png" alt="Chasing ED" />
                        </div>
                        <div>
                            <ul>
                                <li class="nav-level1">Up</li>
                                <li class="nav-level2">Right</li>
                                <li class="nav-level3">Down</li>
                                <li class="nav-level4">Left</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!--Slide Up - Level 1-->
            <div class="slide level1">
                <div class="container">
                    <div class="row">
                        <div class="logo...

CSS

/* CSS Document */

html, body {
	height: 100%;
	margin: 0;
}

.slider {
	height: 100%;
}

.landing {
	min-height: 100%;
	margin: 0;
	background-color: #5fdb5f;
}

.logo {
	margin-top:20%;
	width: 50%;
	height: 20%;
}

.img-logo {
	width: 100%;
}

.continue {
	height: 100px;
	margin-top: 50%;
}

.to-the-articles {
	width: 100%;
}

.slide {
	display: none;
}

.active-slide {
	display: block;
}

/* -----HOME----- */

.home {
	background-color: #fff;
	min-height: 100%;
}

/* -----LEVEL1----- */

.level1 {
	background-color: #c5f369;
	min-height: 100%;
}

/* -----LEVEL2----- */

.level2 {
	background-color: #4fb6b6;
	min-height: 100%;
}

/* -----LEVEL3----- */

.level3 {
	background-color: #ffb06f;
	min-height: 100%;
}

/* -----LEVEL4----- */

.level4 {
	background-color: #5fdb5f;
	min-height: 100%;
}

JavaScript

var fade = function(target) {
		var nextSlide = $(target);
		$('.active-slide').fadeOut(0).removeClass('active-slide');
		nextSlide.fadeIn(1200).addClass('active-slide');
    };

    var main = function() {
	    $('.to-the-articles').click(fade('.home'));
	
	    $('.nav-level1').click(fade('.level1'));
        $('.nav-level2').click(fade('.level2'));
	    $('.nav-level3').click(fade('.level3'));
	    $('.nav-level4').click(fade('.level4'));
    
        $('.back-home').click(fade('.home'));
    };

    $(document).ready(main);