JSFiddle - React, Tailwind, and code Playground

HTML

<div id="botmenu">
    <div id="left">&lt;</div>
    <div id="right">&gt;</div>
    <div id="middle">    
        <div id="items">
            <div class="item">
                <img src="http://placehold.it/40x40">1
            </div>
            <div class="item">
                <img src="http://placehold.it/40x40">2
            </div>
            <div class="item">
                <img src="http://placehold.it/40x40">3
            </div>
            <div class="item">
                <img src="http://placehold.it/40x40">4
            </div>
            <div class="item">
                <img src="http://placehold.it/40x40">5
            </div>
            <div class="item">
                <img src="http://placehold.it/40x40">6
            </div>
            <div class="item">
                 <img src="http://placehold.it/40x40">7
            </div>
            <div class="item">
                 <img src="http://placehold.it/40x40">8
             </div>
            <div class="item">
                 <img src="http://placehold.it/40x40">9
             </div>
            <div class="item">
                 <img src="http://placehold.it/40x40">10
             </div>
            <div class="item">
                 <img src="http://placehold.it/40x40">11
             </div>
            <div class="item">
                 <img src="http://placehold.it/40x40">12
             </div>
            <div class="item">
                 <img src="http://placehold.it/40x40">13
             </div>
            <div class="item">
                 <img src="http://placehold.it/40x40">14
             </div>
            <div class="item">
                 <img src="http://placehold.it/40x40">15
             </div>
            <div class="item">
                 <img src="http://placehold.it/40x40">16
             </div>
            <div class="item">
                 <img src="http://placehold.it/40x40">17
             </div>
            <div class="item">
                 <img...

CSS

#botmenu
{
    position: fixed;
    width: 100%;
    height: 50px;
    bottom: 0px;
    background: fuchsia;
    text-align:center;
}
#middle
{
    background: red;
    overflow: hidden;
    height: 50px;
}
#items
{
    background: yellow;
}
.item
{
    padding: 5px;
    float: left;

}
#left{
    float:left;
    width:30px;
    margin-top: 15px;
    height: 20px;
    background:cyan;
}
#right{
    float:right;
    width:30px;
    margin-top: 15px;
    height: 20px;
    background:cyan;
}

JavaScript

var totalWidth = 0;
$(".item").each(function(index, value) {
    totalWidth += $(value).outerWidth();
});

$("#items").width(totalWidth);

$("#left").click(function() {
    $("#middle").animate({
        scrollLeft: "-=50px"
    }, 'fast');
});
                 
$("#right").click(function() {
    $("#middle").animate({
        scrollLeft: "+=50px"
    }, 'fast');
});

scrollToElem = function(target) {
    var pos = ($(".item").outerWidth() * target) - ($("#middle").innerWidth()/2);
    $("#middle").animate({
            scrollLeft: pos
        }, 'fast');
};

$(function() {
    scrollToElem(300);
});