JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <script>
function goto_step(step)
{
    x_pos = ((step-1) * 280) * -1;
    $("#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 id="mask"></div>
            </div>
        </div>
    </body>
</html>

CSS

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


#wrapper{
    position: relative;
    display: inline-block;
    width: 280px;
    height: 280px;
    border-radius: 5px;
    margin: 10px;
    overflow: hidden;
}
#box_content{
    width: 840px;
    height: 280px;
    position: relative;
    left: 0px;
    top: 0px;
}
#mask {
    position: absolute;
    top: 0px; left: 0px;
    width: 100%;
    height: 100%;

    box-shadow: 0 0 10px #000000 inset;
    pointer-events: none;
}

.step{
    width: 280px;
    height: 280px;
    float: left;
}
.step1{
    background-color: #f00;
}
.step2{
    background-color: #0f0;
}
.step3{
    background-color: #00f;
}