JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="mymenu" class="sm">
    <li class="m1 active" data-family="A">fqsdf</li>
    <li class="m2" data-family="B">sdqfqsdf</li>
    <li class="m3" data-family="C"></li>
    <li class="m4" data-family="D"></li>
    <li class="m5" data-family="E"></li>
    <li class="m6" data-family="F"></li>
    <li class="m7" data-family="G"></li>
    <li class="m8" data-family="I"></li>
</ul>

CSS

.sm {
    position: relative;
    list-style:none;
    width:90%;
    display:block;
    overflow:hidden;
}
.sm li {
    float:left;
    display:inline-block;
    overflow:hidden !important;
    height:160px;
    cursor: pointer;
}
.sm li {
    overflow-x: hidden !important;
    cursor: pointer;
    border-left: solid 1px white;
}
.sm li img {
    display: inline;
}
.m1 {
    background-color: rgb(0, 0, 25);
}
.m2 {
    background-color: rgb(0, 0,50);
}
.m3 {
    background-color: rgb(0, 0,75);
}
.m4 {
    background-color: rgb(0, 0,100);
}
.m5 {
    background-color: rgb(0,  0,125);
}
.m6 {
    background-color: rgb(0, 0,150);
}
.m7 {
    background-color: rgb(0, 0,175);
}
.m8 {
    background-color: rgb(0, 0,200);
}
.m9 {
    background-color: rgb(0, 0,255);
}

JavaScript

var slideMenu = function () {
    var sp, st, t, m, sa, l, w, sw, ot;
    return {
        build: function (sm, sw, mt, s, sl, h) {
            sp = s;
            st = sw;
            t = mt;
            m = document.getElementById(sm);
            sa = m.getElementsByTagName('li');
            l = sa.length;
            w = m.offsetWidth;
            sw = w / l;
            ot = Math.floor((w - st) / (l - 1));
            var i = 0;
            for (i; i < l; i++) {
                s = sa[i];
                s.style.width = sw + 'px';
                this.timer(s)
            }
            if (sl != null) {
                m.timer = setInterval(function () {
                    slideMenu.slide(sa[sl - 1])
                }, t)
            }
        },
        timer: function (s) {
            s.onmouseover = function () {
                clearInterval(m.timer);
                m.timer = setInterval(function () {
                    slideMenu.slide(s)
                }, t)
            }
        },
        slide: function (s) {
            var cw = parseInt(s.style.width, '10');
            if (cw < st) {
                var owt = 0;
                var i = 0;
                for (i; i < l; i++) {
                    if (sa[i] != s) {
                        var o, ow;
                        var oi = 0;
                        o = sa[i];
                        ow = parseInt(o.style.width, '10');
                        if (ow > ot) {
                            oi = Math.floor((ow - ot) / sp);
                            oi = (oi > 0) ? oi : 1;
                            o.style.width = (ow - oi) + 'px'
                        }
                        owt = owt + (ow - oi)
                    }
                }
                s.style.width = (w - owt) + 'px';
            } else {
                clearInterval(m.timer)
            }
        }
    };


   
}();
 slideMenu.build('mymenu', 150, 15, 5, 1);
 $("#mymenu>li").click(function(e){
              ...