JSFiddle - React, Tailwind, and code Playground

HTML

<div class="scrollWrapperAll"> 
 
<div class="scrollWrapper">
<ul id="scroll">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>21</li>
    <li>23</li>
    <li>24</li>
</ul>
</div>

<div class="scrollNav">
<a href="#" class="left" id="left">left</a>
<p class="count">1/1</p>
<a href="#" class="right" id="right">right</a>
</div>
</div>

CSS

body {font-family:arial;font-style:bold}
a {color:#666; text-decoration:none}
li { list-style:none; }
ul { margin:0; padding:0; position:absolute;}
.scrollWrapperAll { width:auto; height:auto; }
.scrollWrapperAll .scrollNav { width:auto; height:auto; margin:auto; }
.scrollWrapperAll .scrollNav a.left { float:left; }
.scrollWrapperAll .scrollNav a.right { float:right; }
.scrollWrapperAll .scrollNav p {width: 20px;height: auto;margin: auto;float: left;margin-left: 48%;}
.scrollWrapper { margin:0; padding:0; position:relative;overflow:auto;}

JavaScript

(function($){
    $.fn.extend({ 
        //plugin name - animatemenu
        animateMenu: function(options) {
 
            var defaults = {
                scrollWidth: 100,
                scrollHeight: 100,
                containerWidth: 100,
                wrapperWidth: 1200,
                fl: "left",
                evenColor: '#ccc',
                oddColor: '#eee',
            };
             
            var options = $.extend(defaults, options);
            
            var elNums = $('li').length;
            
            var cw = elNums * options.scrollWidth;
            
            console.log(cw);
            
            $(".scrollWrapper").scrollLeft(3000);
            
            $(".scrollWrapper").css('width', options.wrapperWidth + "px");
            $(".scrollWrapperAll").css('width', options.wrapperWidth + "px");
            $(".scrollWrapper").css('height', options.scrollHeight + "px");
            $(".scrollWrapper").css('overflow', "hidden");
            $("ul").css('width', cw + "px");
            $("ul").css('height', options.scrollHeight + "px");

         
            return this.each(function() {
                  var obj = $(this);                

                  $("li", obj).css('width', options.scrollWidth + "px");
                  $("li", obj).css('height', options.scrollHeight + "px");
                  $("li", obj).css('float', options.fl);                  
                  $("li:even", obj).css('background-color', options.evenColor);               
                  $("li:odd", obj).css('background-color', options.oddColor);                   
                   
                    var count = 2;
                  $("a#left").click(function() {
                  
                      var position = $("ul").position();
                      
                      console.log( "pos left " + position.left);
                      
                       var scrollLeft = position.left - options.wrapperWidth;
         ...