JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Alice"><a>Alice</a></div>
<div><a>Ashlee</a></div>
<div><a>Christian</a></div>
<div><a>George</a></div>   
<div><a>Hank</a></div>
<div><a>Harry</a></div>
<div><a>Mark</a></div>
<div><a>Tom</a></div>

CSS

div {
    margin: 13px;
    padding: 7px;
    border: 3px solid black;
}

JavaScript

$(document).ready(function() {
    $("div").each(function(i, e) {
        $(e).css("border-top-width", rand(10));
        $(e).css("border-bottom-width", rand(10));
        $(e).css("margin-top", rand(30));
        $(e).css("margin-bottom", rand(30));
        $(e).css("padding-top", rand(30));
        $(e).css("padding-bottom", rand(30));
        //$(e).append(infoString($(e)));
    });

    $('div').click(function() {
        $("div").css("color", "");
        $("div").css("border-color", "");
        
        var i1 = Math.min(rand(6),5);
        var i2 = Math.max(rand(7-i1)+i1,i1+1);     
        var i3 = Math.max(rand(8)+i2,i2+1);     
        
        //$("#Alice").append("[" + i1 + "/"+ i2 + "/"+ i3 + "]")
        var set1 = $('div').slice(i1, i2);
        var set2 = $('div').slice(i2, i3);
        
        slideSwap(set1, set2);
    });
});

function slideSwap($set1, $set2) {

    //$elem.append(infoString($elem));
    //$after.append(infoString($after));
    $set1.css("color", "red");
    $set2.css("color", "blue");    
    var $set3 = $set2.last().nextAll();
    $set3.css("color", "green");
    
    var mb_prev = cssprop($set1.first().prev(), "margin-bottom");
    if (isNaN(mb_prev)) mb_prev = 0;
    var mt_next = cssprop($set2.last().next(), "margin-top");
    if (isNaN(mt_next)) mt_next = 0;

    var mt_1 = cssprop($set1.first(), "margin-top");
    var mb_1 = cssprop($set1.last(), "margin-bottom");
    var mt_2 = cssprop($set2.first(), "margin-top");
    var mb_2 = cssprop($set2.last(), "margin-bottom");

    var h1 = $set1.last().offset().top + $set1.last().outerHeight() - $set1.first().offset().top;
    var h2 = $set2.last().offset().top + $set2.last().outerHeight() - $set2.first().offset().top;

    move1 = h2 + Math.max(mb_2, mt_1) + Math.max(mb_prev, mt_2) - Math.max(mb_prev, mt_1);
    move2 = -h1 - Math.max(mb_1, mt_2) - Math.max(mb_prev, mt_1) + Math.max(mb_prev, mt_2);
    move3 = move1 + $set1.first().offset().top + h1 -...