JSFiddle - React, Tailwind, and code Playground

by Ricardo Salazar

HTML

<body>
    <div id='0' class='pagesize img1'></div>
    <div id='1' class='pagesize img2'></div>
    <div id='2' class='pagesize img3'></div>
    <img class='arrow' src='http://presentaciones.keeconsulting.com.mx/img/flecha-abajo.png'/>
</body>

CSS

.pagesize{
    width:100%;
    height:250px;
    border:1px solid cyan;
    position:fixed;
}
.img1{     background:url('http://upload.wikimedia.org/wikipedia/en/archive/f/f4/20090120040123!Free_Blue_Star.jpg') no-repeat;
    background-size:50% 70%;
    z-index:98;
}
.img2{ background:url('http://upload.wikimedia.org/wikipedia/commons/f/f0/Star_Ouro.gif') no-repeat;
background-size:50% 70%;
    border:1px solid cyan;
    top:260px;
    z-index:97;
}
.img3{
width:100%;
height:250px; background:url('http://clipartist.info/clipart/clipartsy/cool_star-2020px.png') no-repeat;
background-size:50% 70%;
    top:260px;
    z-index:96;
}
.arrow{width:50px;height:50px;z-index:99;}

JavaScript

$(document).ready(function(){
    $('div').click(function(){
        var page=$(this).attr('id');
        var divs=$('body div').get();
        $(this).animate({top:'0px'},500);
        for(var i=0;i<divs.length;i++)
            if(page!=i)
                $(divs[i]).css('top','260px');
    });
    
    //TEST ME CLICKING THE STARS FROM BELOW
    //I'm working on controls, but I'm busy for now :C
});