JSFiddle - React, Tailwind, and code Playground

by TekVanDo

HTML

<span class="one white navigation">1</span>

<span class="two navigation">2</span>

<span class="tree navigation">3</span>

<div id="content">
    <div id="black" class="block">
        <div>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh rtrtrtrtrtrtrt</div>
    </div>
    <div id="green" class="block">
        <div>ghjgfjhgfj rtrtrtrtrtrtrt</div>
    </div>
    <div id="red" class="block">
        <div>yutyuyutyutyu hjgfhjgfhjgfhjghj rtrtrtrtrtrtrt</div>
    </div>
    <div>

CSS

* {
    margin:0;
    padding:0;
    color:#F00
}
#black {
    width:500px;
    background:#000;
    height:200px
}
#green {
    width:500px;
    background: #0F0;
    height:200px;
    display:none
}
#red {
    width:500px;
    background: #F00;
    height:200px;
    display:none
}
span {
    cursor:pointer
}
.white {
    color:#FFF
}
.block{
    position:absolute;
}
#content{
   position:relative;    
}

JavaScript

last = false;
$(".navigation").click(function () {
    $(".white").removeClass("white");
    $(this).addClass("white");
    index = $(this).index();
    if (last != false) {
        last.animate({
            "top": 100
        }, 300).fadeOut(10);
    }
    last = $("#content > div").eq(index);
    last.stop(true).css("top",0).fadeIn();

});