JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
    <p class="clear" />
    <div id="first-page">
        <div class="content-container">This is the FIRST page</div>
        <div class="button-container">
            <div id="go" class="button">GO</div>
        </div>
    </div>
    <div id="second-page">
        <div class="content-container">This is the SECOND page</div>
        <div class="button-container">
            <div id="back1" class="button">BACK</div>
            <div id="go1" class="button">GO</div>
        </div>    
    </div>
    <div id="third-page">
        <div class="content-container">This is the THIRD page</div>
        <div class="button-container">
            <div class="button">CLICK ME!</div>
        </div>
    </div>
</div>

CSS

#outer {
    width: 100%;
}
#first-page {
    border: 2px solid #000;
    width: 300px;
    height: 300px;
    margin-top: 40px;
    text-align: center;
    overflow: hidden;
    background-color:yellow;
    position: absolute;
    z-index:3
}
#second-page {
    border: 2px solid #000;
    height: 300px;
    margin-top: 40px;
    text-align: center;
    overflow: hidden;
    width: 340px;
    background-color: blue;
    position: absolute;
    z-index: 2;
}
#third-page {
    border: 2px solid #000;
    height: 300px;
    margin-top: 40px;
    text-align: center;
    overflow: hidden;
    width: 380px;
    background-color: grey;
    position: absolute;
    z-index: 1;
}
.content-container{
    height:260px;
}
.button-container{
    height:40px
}
.button{
    width:100px;
    border: 1px solid #000;
    background-color:red;
    color:white;
    float:left;
    display:block;
    margin-left:20px;
}

.clear {
    clear: both;
}

JavaScript

$('#first-page #go').click(function () {
    $('#first-page').hide('slide', {
        direction: 'left'
    }, 100);
});

$('#go1').click(function () {
    $('#second-page').hide('slide', {
        direction: 'left'
    }, 100);
});

$('#back1').click(function () {
    $('#first-page').show('slide', {
        direction: 'left'
    }, 100);
});

$('#third-page').click(function () {
    alert('You are done!');
    $(this).hide('slide', {
        direction: 'left'
    }, 600);
});