JSFiddle - React, Tailwind, and code Playground

HTML

<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

CSS

div { top: 0px; position: absolute; width: 200px; height: 200px; background: red; display: block; }
.first { left: 0px; }
.second { left: 210px; }
.third { left: 420px; }

JavaScript

$("div").click(function() {
        var first = $(".first");
        var fleft = first.css("left");
        var ftop = first.css("top");           
       var tLeft = $(this).css('left');
       var tTop = $(this).css('top');
       var tClass = $(this).attr("class");

       first.animate({
          left: tLeft,
          top: tTop
       }).attr("class", tClass);
        
       $(this).animate({ 
           top: ftop,
           left: fleft
       }).attr("class", "first");        

    });