JSFiddle - React, Tailwind, and code Playground

HTML

<!--
1. Drag a square into the landing zone, works fine.
2. Drag a square outside of the landing zone, returns to 


-->

<div id="landingzone"></div>
<div id="pallete">
    <div class="a dragme">
    </div>
    <div class="b dragme">
    </div>
    <div class="c dragme">
    </div>
</div>

CSS

.dragme {
  height: 50px;
   width: 50px; 
}

#landingzone {
 background-color: #eef;
  height: 100px; 
}

.a {
    background-color: red;   
}

.b {
     background-color: blue;   
}

.c {
     background-color: yellow;   
}

JavaScript

$("#landingzone").droppable();
$(".dragme").draggable({
    revert: "invalid",
    helper: "clone",
    grid: [50,50]
});