JSFiddle - React, Tailwind, and code Playground

HTML

<div id='div1' class='panel'>div 1</div>
<div id='div2' class='panel'>div 2</div>
<div id='div3' class='panel'>div 3</div>

CSS

* {margin: 0; padding: 0}

.panel{
    float: left;
    position: absolute;
    width: 100%;
    height: 100px;
    display: inline-block;
}

#div1{
    background-color: #ff0000;
}
#div2{
    background-color: #00ff00;
}
#div3{
    background-color: #0000ff;
}

JavaScript

var left = 0;
var width = $(".panel").width();
$("#div1").css({
    left: 0 + "px"
});
$("#div2").css({
    left: width + "px"
});
$("#div3").css({
    left: 2 * width + "px"
});
$(".panel").click(function() {

    left -= width;
    if (left < -2 * width) {
        left = 0;
    }
    $("#div1").animate({
        left: left + "px"
    });
    $("#div2").animate({
        left: left + width + "px"
    });
    $("#div3").animate({
        left: left + +2 * width + "px"
    });

});