JSFiddle - React, Tailwind, and code Playground

by k_rma

HTML

<div id="container">
    
    <div id="nav">
        <ul>
            <li id="link1" class="pageButton">Page 1</li>
            <li id="link2" class="pageButton">Page 2</li>
            <li id="link3" class="pageButton">Page 3</li>
        </ul>
    </div>
    
    
    <div id="main">
        <div id="page1" class="page">
            <h1>Page 1</h1>
        </div>
        <div id="page2" class="page">
            <h1>Page 2</h1>
        </div>
        <div id="page3" class="page">
            <h1>Page 3</h1>
        </div>
    </div>
    
</div>

CSS

/* General */

h1 {
    font-size: 2em;   
}

/* Container */

div#container {
   min-width: 400px;
}

/* Navigation */

div#nav {
    background-color: #C3C5CB;
    height: 40px;
    width: 510px;
    padding: 5px;
    min-width: 400px;
}

div#nav ul {
    list-style: none;
    float: right;
    margin: 10px 5px;
}

div#nav li {
    display: inline;
    padding: 5px 20px;
    background: gray;
    color: white;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

div#nav li:hover {
    background: red; 
}

div#nav li:active {
    background: blue; 
}

/* Main contents */

div#main, {
    width: 500px;
    min-height: 400px;
    position: relative;
    left: 100px;
    border: solid 1px black;
    margin: 10px 5px;
    overflow:hidden;
}

div.page {
    display: none;
    min-height: 400px;
    width: 0;
    position: absolute;
    color: white;
    padding: 10px;
    left:510px
}

div#page1 {
    background: #6F90FC;
    opacity: 1;
    left: 10px;
    width: 500px;
}

div#page2 {
    background: #B356F5;
    opacity: 0;
    /*left: 400px;*/
}

div#page3 {
    
    background: #81DBE7;
    opacity: 0;
    /*left: 800px;*/
}

JavaScript

$(document).ready(function() {
    $('div#page1').show();

    $('li.pageButton').click(function() {
        var num = $(this).index() + 1;
        var pageId = 'page' + num;

        if ($('div.page:visible').attr('id') != pageId) {
            $('div.page:visible').animate({
                opacity: 0,
                left: -600,
                width: 500
            }, 1000, function() {
                $(this).hide().css({"left":510,"width":0});
            });

            $('div#' + pageId).fadeIn().animate({
                opacity: 1,
                left: 10,
                width: 500
            }, 1000);
        }


/*
        if ($('div.page:visible').attr('id') != pageId) {
            $('div.page:visible').toggle('slow',function(){
                $('div#' + pageId).toggle('slow');
            });
        }
        */
    });
});