JSFiddle - React, Tailwind, and code Playground

HTML

<div id='viewport'>
    <div id='slides'>
        <div>Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
        <div>Content 4</div>
        <div>Content 5</div>
    </div>
</div>
<p id='left'><<</p>
<p id='right'>>></p>

CSS

#viewport {width:400px;height:110px;overflow:hidden;padding:5px 0;}
#slides div {float:left;width:90px;height:100px;border:1px solid black;margin:0 4px;}
p {cursor:pointer;}

JavaScript

$(document).ready(function() {

    count = $('#slides').children('div').length;
    $('#slides').css('width',count*100 + 'px');
    
    $('#left').click(function() {
        $('#slides').animate({
            marginLeft: '-=100'    
        });
    });
    
    $('#right').click(function() {
        $('#slides').animate({
            marginLeft: '+=100'   
        });
    });

});