JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pond">
    <div id="boat" class="box">Boat</div>
    <div id="ducky" class="box">Ducky</div>
</div>

SCSS

.pond {
    width:300px;
    height:500px;
    position:relative;
    background:blue;
}    
.pond.green {
    background:green;
}
    
.box {
    position:absolute;
    top:1px;
    left:1px;
    border:1px solid red;
    width:100px;
    height:100px;
    background:#fff;
}

.box.ui-state-highlight {
    border:3px dotted green;
}



#ducky.box {
    background:yellow;
    left:auto;
    right:1px;
}

#ducky.box.inmotion {
    background:#ef23a4;
}

JavaScript

$(function() {
        $("#ducky").draggable({
        helper:'clone',
            revert: function(is_valid_drop){
                console.log("is_valid_drop = " + is_valid_drop);
                if(!is_valid_drop){
                   console.log("revert triggered");
                    $(".pond").addClass("green");
                    $(this).removeClass("inmotion");
                   return true;
                } else {
                    $(".pond").removeClass("green");
                    $(this).removeClass("inmotion");
                }
            },
            drag: function(){
                $(this).addClass("inmotion");
            }
        });
        $("#boat").droppable({
          drop: function( event, ui ) {
            $(this)
              .addClass("ui-state-highlight");
          }
        });
      });