JSFiddle - React, Tailwind, and code Playground

by sarathsprakash

HTML

<div id="website">
    <div id="background">
        <div id="midground">
            <div id="foreground">
                <div id="header">Squbo</div>
                <div id="main">
                    <div id="page1" style="right: 840px;" class='pages'>
                        <img id="page1image" src="http://www.squbo.com/index/page1.png" />
                    </div>
                    <div id="page2" style="right: 840px;" class='pages'>
                        <img id="page2image" src="http://www.squbo.com/index/page2.png" />
                    </div>
                </div>
                <div id="footer"></div>
            </div>
        </div>
    </div>
</div>

CSS

#page1 {
    width: 760px;
    height: 376px;
    position: absolute;
    left: 0px;
}
#page2 {
    width: 760px;
    height: 376px;
    position: absolute;
    left: 840px;
}
#html, body {
    font-family: Segoe UI Light, Open Sans, Verdana, Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 100;
    line-height: 100%;
    color: #ffffff;
    text-align: left;
}
#main {
    width: 760px;
    height: 376px;
    position: absolute;
    overflow: hidden;
}

JavaScript

$(document).ready(function () {
    $(".pages").click(function () {
        if ($(this).next('div').hasClass('pages') == true) {
            $(this).animate({
                'left': '-150%'
            }, 300, function () {

                $(this).next().animate({
                    'left': '0%'
                }, 300);


            });
        }
    });
});