JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<section class="contentWell">
    <div id="spots" class="listContent">
        <div class="spot" id="spot0">0</div>
        <div class="spot" id="spot1">1</div>
        <div class="spot" id="spot2">2</div>
        <div class="spot" id="spot3">3</div>
    </div>
    <div id="items" class="listContent">
        <div class="item" id="item3">3</div>
        <div class="item" id="item1">1</div>
        <div class="item" id="item0">0</div>
        <div class="item" id="item2">2</div>
    </div>
</section>

CSS

* {
    box-sizing: border-box;
}
.contentWell {
    position: relative;
    width: 410px;
    height: 410px;
}
.listContent {
    float: left;
    width: 100%;
}
.spot, .item {
    width: 200px;
    height: 200px;
    padding: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
    float: left;
    font-family: sans-serif;
}
.spot {
    border: 3px solid aqua;
    color: aqua;
}
.item {
    border: 1px solid blue;
    position: absolute;
}

JavaScript

$('.item').each(function (i) {
    var itemNumber = $(this).attr("id").substring(4);
    $('#item' + itemNumber).css({
        top: $('.spot').eq(i).position().top,
        left: $('.spot').eq(i).position().left
    });
    
    $('#item' + itemNumber).animate({
        top: $('#spot' + itemNumber).position().top,
        left: $('#spot' + itemNumber).position().left
    }, 3000);
});