JSFiddle - React, Tailwind, and code Playground

by velmurugansp

HTML

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<aside>
    <a href="" class="current" data-link="one">One</a>
    <a href="" data-link="two">Two</a>
    <a href="" data-link="three">Three</a>
    <a href="" data-link="four">Four</a>
</aside>

CSS

aside{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
body{
    overflow: hidden;
}
aside{
    background: #000;
    padding: 0 4px;
    width: 100%
}
a{
    color: #fff;
    display: inline-block;
    font: bold 14px Arial, sans-serif;
    text-decoration: none;
    padding: 4px 8px;
}
a.current{
    background: #ccc;    
}
.one{
    position: absolute;
    width: 100%;
    height: 100%;
    background: red;
    left: 0;
    top: 0;
}
.two, .three, .four{
    position: absolute;
    width: 100%;
    height: 430px;
    background: blue;
    left: 0;
    top: -710px;
}
.one:before, .two:before, .three:before, .four:before{
    content: " ";
    position: absolute;
    left: 0;
    top: 430px;
    border: solid 280px #fff;
    border-color: blue transparent transparent;
}

.one:before{
    border-color: red transparent transparent;
}
.two{
    background: blue
}
.two:before{
    border-color: blue transparent transparent;
}
.three{
    background: green
}
.three:before{
    border-color: green transparent transparent;
}
.four{
    background: yellow
}
.four:before{
    border-color: yellow transparent transparent;
}
div.active{
    z-index: 10;
}

JavaScript

$('document').ready(function(){
    $("a").click(function(e){
        e.preventDefault();
        var $this = $(this),
            target = "."+$this.data("link");
        
        $('aside').find('a').removeClass('current');
        $this.addClass('current');
        $this.addClass('current');
        $('div').removeClass('active');
        $(target).addClass('active');
        $(target).animate({
            "top": '0'
        }, 500, function(){
            $('div').not('.active').css("top", "-710px");
        });
    });
});