JSFiddle - React, Tailwind, and code Playground

by tt cc

HTML

<div class="main">
    <div class="items items-l">
        <a class="items-link" data-index="1" href="#" >Item 1</a>
        <a class="items-link" data-index="2" href="#" >Item 2</a>
        <a class="items-link" data-index="3" href="#" >Item 3</a>
        <a class="items-link" data-index="4" href="#" >Item 4</a>
    </div>
    <div class="items items-r">
        <a href="#" class="items-link" data-index="5">Item 5</a>
        <a href="#" class="items-link" data-index="6">Item 6</a>
        <a href="#" class="items-link" data-index="7">Item 7</a>
        <a href="#" class="items-link" data-index="8">Item 8</a>
    </div>
</div>

CSS

.items {
    padding: 0;
    -webkit-transition: 300ms linear all;
    transition: 300ms linear all;
}

.items.items-l {
    float: left
}

.items.items-r {
    float: right
}

.items.items-l a {
    background: #0000FF
}

.items.items-r a {
    background: #F00000
}

.items a, .items-link {
    color: #fff;
    padding: 10px;
    display: block;
}

JavaScript

$(document).ready(function () {
    var animating = false, durtion = 300;
    $('.items').on("click", ".items-link", function () {
        if (animating) return;
        animating = true;
        var $this = $(this),
            dir = $this.parent().hasClass("items-l") ? "r" : "l",
            color = dir == "l" ? "#0000FF" : "#F00000",
            index = $this.attr("data-index");
            
        var toItems = $('.items-' + dir),
            itemsLinks = toItems.find(".items-link"),
            newEle = $this.clone(true),
            nextEle = $this.next(),
            toEle;
            
        if (itemsLinks.length == 0) {
            toItems.append(newEle)
        } else {
            itemsLinks.each(function () {
                if ($(this).attr("data-index") > index) {
                    toEle = $(this);
                    return false;
                }
            });
            if (toEle) {
                toEle.before(newEle).animate({
                    "marginTop": $this.outerHeight()
                }, durtion, function () {
                    toEle.css("marginTop", 0);
                });
            } else {
                toEle = itemsLinks.last();
                toEle.after(newEle)
            }
        }
        
        nextEle && nextEle.css("marginTop", $this.outerHeight()).animate({
            "marginTop": 0
        }, durtion);
        
        var animate = newEle.position();
        animate["background-color"] = color;
        newEle.hide() && $this.css('position', 'absolute').animate(animate, durtion, function () {
            newEle.show();
            $this.remove();
            animating = false;
        });
    });
});