JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <script>
function goto_step(step)
{
    x_pos = ((step-1) * 280) * -1;
    $("#wrapper").removeClass().addClass('step' + step);
    $("#box_content").animate({'left': x_pos}, 700);
}
    </script>
    <body>
        <div id="box">
            <div id="wrapper">
                <div id="box_content">
                    <div class="step step1">
                        Step 1
                        <a href="javascript:goto_step(2);">Go to step 2</a>
                    </div>
                    <div class="step step2">
                        Step 2
                        <a href="#" onclick="goto_step(3);">Go to step 3</a>
                    </div>
                    <div class="step step3">
                        Step 3
                        <a href="#" onclick="goto_step(1);">Back to step 1</a>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

CSS

#box{
    background-color: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 10px #000000;
    width: 300px;
    height: 300px;
}
#body{
    margin: 0px;
}


#wrapper{
    display: inline-block;
    width: 280px;
    height: 280px;
    margin: 10px;
    overflow: hidden;
    border-radius: 5px;
}
#box_content{
    width: 840px;
    height: 280px;
    position: relative;
    left: 0px;
    top: 0px;
}
.step{
    width: 280px;
    height: 280px;
    float: left;
    border-radius: 5px;
    box-shadow: 0 0 10px #000000 inset;
}
a{
    color: #000;
    font-weight: bold;
}
.step1{
    background-color: #f00;
}
.step2{
    background-color: #0f0;
}
.step3{
    background-color: #00f;
}