JSFiddle - React, Tailwind, and code Playground

by BramVanroy

HTML

<section id="blue" class="base parentSection">
    <span class="links"><a href="#" class="next_link"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/U%2B2192.svg/500px-U%2B2192.svg.png" alt="next"></a></span>
</section>

<section id="red" class="right parentSection">
    <span class="links"><a href="#" class="next_link"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/U%2B2193.svg/500px-U%2B2193.svg.png" alt="next"></a> | <a href="#" class="base_link">Base</a> | <a href="#" class="previous_link"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/U%2B2190.svg/500px-U%2B2190.svg.png" alt="previous"></a></span>
</section>

<section id="grey" class="bottom parentSection">
    <span class="links"><a href="#" class="next_link"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/U%2B2193.svg/500px-U%2B2193.svg.png" alt="next"></a> | <a href="#" class="base_link">Base</a> | <a href="#" class="previous_link"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/U%2B2191.svg/500px-U%2B2191.svg.png" alt="previous"></a></span>
</section>

<section id="green" class="bottom parentSection">
    <span class="links"><a href="#" class="next_link"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/U%2B2190.svg/500px-U%2B2190.svg.png" alt="next"></a> | <a href="#" class="base_link">Base</a> | <a href="#" class="previous_link"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/U%2B2191.svg/500px-U%2B2191.svg.png" alt="previous"></a></span>
</section>

<section id="white" class="left parentSection">
    <span class="links"><a href="#" class="next_link"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/U%2B2193.svg/500px-U%2B2193.svg.png" alt="next"></a> | <a href="#" class="base_link">Base</a> | <a href="#" class="previous_link"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/U%2B2192.svg/500px-U%2B2192.svg.png"...

CSS

html, body {
    width: 100%;
    height: 100%;
    background: grey;
    overflow: hidden
}

section {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: block;
    position: absolute;
}

#blue {background: #1686CC}
#red {background: #CC1616}
#grey {background: #CCCCCC}
#white {background: white}
#green {background: #68CC16}
#black {background: black}


span {
    margin: 50px;
    line-height: 1.2;
    display: block
}

span, a {
    color: #333;
    text-shadow: 1px 1px 0px rgba(255,255,255,0.35), 0px -1px 0px rgba(0,0,0,0.3);
    font-family: sans-serif;
    font-size: 52px;
    font-weight: bold;
    text-decoration: none
}

a:hover {color: black}

img {max-width: 200px; max-height: 200px}

JavaScript

$(document).ready(function() {
    var w = $(window).width();
    var h = $(window).height();

    // Initial positioning
    $(".parentSection.base").css({
        "left": "0",
        "top": "0"
    });

    $(".parentSection.right").css("left", w);
    $(".parentSection.left").css("right", w);
    $(".parentSection.top").css("bottom", h);
    $(".parentSection.bottom").css("top", h);

    //
    // GOING FORWARD
    var nextClick = $("a.next_link");

    nextClick.click(function() {
        var parentSection = $(this).parents("section.parentSection");

        if (parentSection.next().hasClass("right")) {
            parentSection.animate({
                left: -w
            }, 500);
            parentSection.next().animate({
                left: 0
            }, 500);
        }

        if (parentSection.next().hasClass("left")) {
            parentSection.animate({
                right: -w
            }, 500);
            parentSection.next().animate({
                right: 0
            }, 500);
        }

        if (parentSection.next().hasClass("top")) {
            parentSection.animate({
                bottom: -h
            }, 500);
            parentSection.next().animate({
                bottom: 0
            }, 500);
        }

        if (parentSection.next().hasClass("bottom")) {
            parentSection.animate({
                top: -h
            }, 500);
            parentSection.next().animate({
                top: 0
            }, 500);
        }
    });

    //
    // GOING BACKWARDS
    var prevClick = $("a.previous_link");

    prevClick.click(function() {
        var parentSection = $(this).parents("section.parentSection");

        if (parentSection.hasClass("right")) {
            parentSection.animate({
                left: w
            }, 500);
            parentSection.prev().animate({
                left: 0
            }, 500);
        }

        if (parentSection.hasClass("left")) {
           ...