JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="links">
    <li id="a-one"><a id="a-0" href="#">One</a></li>
    <li id="a-two"><a id="a-1" href="#">Two</a></li>
    <li id="a-three"><a id="a-2" href="#">Three</a></li>
    <li id="a-four"><a id="a-3" href="#">Four</a></li>
</ul>

<ul id="gallery">
    <li id="img-one"><div class="box">&nbsp;</div></li>
    <li id="img-two"><div class="box">&nbsp;</div></li>
    <li id="img-three"><div class="box">&nbsp;</div></li>
    <li id="img-four"><div class="box">&nbsp;</div></li>    
</ul>

CSS

.box { 
    width: 100px; 
    height: 100px; 
    background-color: #ccc; 
    float: left; 
    margin-right: 5px; }

#gallery { position: relative; }

JavaScript

$('a').click(function(){
    var id = this.id;
    var n = id.substring(id.indexOf("-", 0) + 1);
    $('ul#gallery').animate(
        {
            left: -n * 105 + 'px'
        }, 100);
});