JSFiddle - React, Tailwind, and code Playground

HTML

<div class="inline-wrapper">
    <div class="inline-blocks" id="f">123</div>
    <div class="inline-blocks" id="s">123</div>
    <div class="inline-blocks" id="t">123</div>
    <div class="inline-blocks" id="fo">123</div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    /*  overflow: hidden;*/
}
.inline-wrapper {
    width: 400%;
    height: 100%;
    font-size: 0;
    position: relative;
}
.inline-blocks {
    display: inline-block;
    width: 25%;
    height: 100%;
    vertical-align: top;
    position: relative;
}
>.inline-blocks:nth-child(1) {
    background-color: #000;
}
.inline-blocks:nth-child(2) {
    background-color: blue;
}
.inline-blocks:nth-child(3) {
    background-color: red;
}
.inline-blocks:nth-child(4) {
    background-color: green;
}

JavaScript

(function () {
    var numDivs = $('.inline-wrapper').children().length; //Count children ELements
    var counter = 1;

    function slide(time, counter) {
        var $currentDiv = $('.inline-wrapper .inline-blocks:nth-child(' + counter + ')'); //get next element
        var position = $currentDiv.position(); //get position of next element

        if (numDivs > 1) {
            $('html,body').animate({
                scrollLeft: position.left
            }, time / 2); //Animate to next element
        }
    };

    $('.inline-blocks').on('click', function () {
        counter = counter + 1;
        slide(2000, counter);
    });
})();