JSFiddle - React, Tailwind, and code Playground

by thecodeparadox

HTML

<title>Test Site</title>
<title>Publishing Your Way</title>
</head>
<body>

<div id="sidebar">
<div class="inactive" id="up"></div>
<div class="active" id="down"></div>
</div>

<div id="nav"><div id="n0">0</div><div id="n1">1</div><div id="n2">2</div><div id="n3">3</div><div id="n4">4</div></div>

<div id="content">
<div class="box position0" id="b0">0</div>
<div class="box position-1" id="b1">1</div>
<div class="box position-2" id="b2">2</div>
<div class="box position-3" id="b3">3</div>
<div class="box position-4" id="b4">4</div>
</div>





</body>

CSS

* {margin:0px; padding:0px;}
html{overflow: auto; overflow-y: hidden;}

#sidebar            {height:650px; width:100px; position:absolute; right:30px; top:50%; margin-top:-325px;}
#up, #down            {height:100px; width:25px; border:1px solid black; }
#up                    {border-top:5px solid black; position:absolute; top:0px; right:0px;}
#down                {border-bottom:5px solid black; position:absolute; bottom:0px; right:0px;}

.inactive            {background:#999999;}
.active                {background:#0278BC; cursor:pointer;}

#nav div {width:50px; height:50px; position:absolute; border:1px solid black;}
#n0    {top:0px; left:0px;}
#n1    {top:0px; left:50px;}
#n2    {top:0px; left:100px;}
#n3    {top:0px; left:150px;}
#n4    {top:0px; left:200px;}

.box                {height:400px; width:1000px; border:5px solid black; margin-left:-500px;}

.position4                {position:absolute; top:0%; left:50%; margin-top: -1680px;}
.position3                {position:absolute; top:0%; left:50%; margin-top: -1260px;}
.position2                {position:absolute; top:0%; left:50%; margin-top: -840px;}
.position1                {position:absolute; top:0%; left:50%; margin-top: -420px;}
.position0                {position:absolute; top:50%; left:50%; margin-top: -200px;}
.position-1                {position:absolute; top:100%; left:50%; margin-top: 420px;}
.position-2                {position:absolute; top:100%; left:50%; margin-top: 840x;}
.position-3                {position:absolute; top:100%; left:50%; margin-top: 1260x;}
.position-4                {position:absolute; top:100%; left:50%; margin-top: 1680x;}

JavaScript

$(document).ready(function() {



    var movedown1 = function() {
        if ($('.box').is(':animated') || $('#down').hasClass('inactive')) {
            return;
        }
        else {
            $('#up').switchClass('inactive', 'active', 500)
            if ($('#b4').hasClass('position-1')) {
                $('#down').switchClass('active', 'inactive', 500);
            }
            $('.position3').switchClass('position3', 'position4', 1000)
            $('.position2').switchClass('position2', 'position3', 1000)
            $('.position1').switchClass('position1', 'position2', 1000)
            $('.position0').switchClass('position0', 'position1', 1000)
            $('.position-1').switchClass('position-1', 'position0', 1000)
            $('.position-2').switchClass('position-2', 'position-1', 1000)
            $('.position-3').switchClass('position-3', 'position-2', 1000)
            $('.position-4').switchClass('position-4', 'position-3', 1000)
        };
    };

    var moveup1 = function() {
        if ($('.box').is(':animated') || $('#up').hasClass('inactive')) {
            return;
        }
        else {
            $('#down').switchClass('inactive', 'active', 500)
            if ($('#b0').hasClass('position1')) {
                $('#up').switchClass('active', 'inactive', 500);
            }
            $('.position4').switchClass('position4', 'position3', 1000)
            $('.position3').switchClass('position3', 'position2', 1000)
            $('.position2').switchClass('position2', 'position1', 1000)
            $('.position1').switchClass('position1', 'position0', 1000)
            $('.position0').switchClass('position0', 'position-1', 1000)
            $('.position-1').switchClass('position-1', 'position-2', 1000)
            $('.position-2').switchClass('position-2', 'position-3', 1000)
            $('.position-3').switchClass('position-3', 'position-4', 1000)
        };
    };

    var movedown2 = function() {
        if...