JSFiddle - React, Tailwind, and code Playground

HTML

<div id="view-port">
    <div id="canvas">
        <section id="step1">
            <h1>Step 1</h1>
            <p>This is the first step... you can only go forward</p>
            <a href="#step2">Next</a>
        </section>
        <section id="step2">
            <h1>Step 2</h1>
            <p>This is the second step...<br/>
                you can go back to correct or reread stuff...<br/>
                or continue forward</p>
            <a href="#step1">Back</a>
            <a href="#step3">Next</a>
        </section>
        <section id="step3">
            <h1>Step 3</h1>
            <p>Finish line</p>
            <a href="#step2">Back</a>
            <a href="#step1">Reset</a>
        </section>
    </div>
</div>

CSS

body {
    margin-top:30px;
    background-color: #233138;
    font-family: arial;
}

h1 {
    font-size: 140%;
    color: #4C646B;
    margin-bottom: 8px;
    font-weight: bold;
}

#view-port {
    background-color: #FFFFFF;
    width: 300px;
    margin:0 auto;
    border: 5px solid #FF9F67;
    overflow: hidden;
}

#canvas {
    width:9000px;
    position:relative;
}

section {
    margin:15px;
    float:left;
    width: 300px;
}

JavaScript

$(document).ready(function() {
    $('#view-port section a[href^=#]').click(function() {
        var target = $(this).attr('href');
        $('#canvas').animate({
            "left": "-" + $(target).position().left + "px"
        }, "fast");
        return false;
    });
});