JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container1">
  <div class="widget1">
  </div>
</div>

<div class="container2">
</div>

CSS

.container1, .container2 {
  background: blue;
  width: 250px;
  height: 250px;
  margin-bottom: 20px;
}

.widget1 {
  background: red;
  width: 50px;
  height: 50px;
}

JavaScript

$('.widget1').resizable({
	containment: 'parent'
}).draggable({
  revert: 'invalid'
});

$('.container1, .container2').droppable({
	tolerance: 'fit'
});