JSFiddle - React, Tailwind, and code Playground

HTML

<div id="browser">
    <a href="#" id="left-button">BACK</a>
    <div id="content">
        This is the content of the text which should be scrolled.
    </div>
    <a href="#" id="right-button">NEXT</a>
</div>

CSS

#browser {
    float: right;
    width: 300px;
    overflow: hidden;
    white-space: nowrap;
}

JavaScript

var $content = $('#content'),
    marginLeft= parseInt($content.css('margin-left'), 10);

$('#right-button').click(function(ev) {
    ev.preventDefault();
    marginLeft= parseInt($content.css('margin-left'), 10);
    $('#content').animate({
        marginLeft: (marginLeft- 100) + "%"
    }, "fast");
});

$('#left-button').click(function(ev) {
    ev.preventDefault();
    marginLeft= parseInt($content.css('margin-left'), 10);
    $('#content').animate({
        marginLeft: (marginLeft+ 100) + "%"
    }, "fast");
});