JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/zachstronaut/jquery-css-transform/master/jquery-css-transform.js"></script>
<script src="https://raw.github.com/zachstronaut/jquery-animate-css-rotate-scale/master/jquery-animate-css-rotate-scale.js"></script>
<input id="parkit" type="button" value="park those suckers">
speed: <input id="speed" type="text" style="width:2em; text-align: right;" value="100">ms
<input id="reset" type="button" value="line em back up">

<div id="park">
    <ol>
        <li><a href=''>one</a></li>
        <li><a href=''>two</a></li>
        <li><a href=''>three</a></li>
        <li><a href=''>four</a></li>
        <li><a href=''>five</a></li>
        <li><a href=''>six</a></li>
        <li><a href=''>seven</a></li>
        <li><a href=''>eight</a></li>
        <li><a href=''>nine</a></li>
        <li><a href=''>ten</a></li>
        <li><a href=''>ten and one</a></li>
        <li><a href=''>ten and two</a></li>
        <li><a href=''>ten and three</a></li>
        <li><a href=''>ten and four</a></li>
        <li><a href=''>ten and five</a></li>
    </ol>
</div>

CSS

#park {
    background-color: #00C;
    height: 400px;
    min-width: 400px;
}

#envelop {
    display: block;
    position: relative;
    background-color: red;
    max-width: 300px;
}

#envelop li {
    display: inline-block;
}

#envelop li+li {
    margin-left: 1em;
}

.spaced li+li {
    margin-left: 1em;
}

li {
    display: block;
    position: relative;
}

li a {
    color: #FF0;
    text-decoration: none;
    font-weight: bold;
    font-family: monospace;
    font-size: 10.5pt;
    background-color: #003;
}

input[type=button] {
    padding: 2px 5px;
}

.parking {
    display: inline-block;
}

.parked {
    display: inline-block;
}

JavaScript

function noop() {}

/**
 * Set the transform origin for an element
 * using all those nasty vendor specific calls.
 */
function origin(element, top, left) {
    var origin = top + " " + left;
    element.css("transform-origin", origin)
           .css("-o-transform-origin", origin)
           .css("-moz-transform-origin", origin)
           .css("-webkit-transform-origin", origin)
           .css("-ms-transform-origin", origin);
}

/**
 * Park and element. Like a car. Yes.
 */
function park(vehicle, target) {

    // rotate movable around fixed
    var foff = target.offset();
    var fh = target.height();
    var fw = $("a", target).width();
    var moff = vehicle.offset();
    var mh = vehicle.height();

    var speed = parseInt($("#speed").val())/2;

    origin(vehicle, "0px", "-" + mh + "px");
    // magic numbers. the angle should depend on the length of the rotation term
    var props = {
        left: "5px",
        rotate: "-32deg"
    };
    vehicle.animate(props, speed, function() {
        origin(vehicle, "0px", "0px");
        // and more magic numbers, these make things 'look good' in between
        // the rotation and the slide
        vehicle.css("left", (vehicle.offset().left+10)+"px");
        vehicle.css("top", "-3px");
        props = {
            left: (vehicle.offset().left+fw) + "px",
            rotate: "0deg",
            top: "-20px"
        };
        vehicle.animate(props, speed / 2, function(){
            props = {
                left: (vehicle.offset().left-10) + "px",
            }
            $(this).animate(props, speed/2, function(){
                $(this).addClass("parked")
                       .removeClass("parking")
                       .css("position",'')
                       .css("top",'')
                       .css("left",'');
                $(target).addClass("parking");
                start();
            });

        
        });
    });
}

function start() {
    $("#park ol").each(function(){
        var...