JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>
 
<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>

CSS

#draggable {
    width: 100px; 
    height: 100px; 
    padding: 0.5em; 
    float: left; 
    margin: 10px 10px 10px 0; 
  }
  #droppable { 
    width: 150px;
    height: 150px;
    padding: 0.5em;
    float: left;
    margin: 10px;
  }

JavaScript

$(function() {
    $( "#draggable" ).draggable({
      create: function( event, ui ) {console.log('DRG create');},
      drag: function( event, ui ) {console.log('DRG drag');},
      start: function( event, ui ) {console.log('DRG start');},
      stop: function( event, ui ) {console.log('DRG stop');},
      revert: function( event, ui ) {console.log('DRG revert'); return true;},
      });

    $( "#droppable" ).droppable({
      drop: function( event, ui ) {console.log('DRP drop');},
      over: function( event, ui ) {console.log('DRP over');},
      out: function( event, ui ) {console.log('DRP out');},
      deactivate: function( event, ui ) {console.log('DRP deactivate');},
      activate: function( event, ui ) {console.log('DRP activate');},
      create: function( event, ui ) {console.log('DRP create');}
      });
    $('#draggable').on('mousedown', function(){
      console.log('DRG M mousedown');
    });
    $('#draggable').on('mouseup', function(){
      console.log('DRG M mouseup');
    });
    $('#draggable').on('mouseenter', function(){
      console.log('DRG M mouseenter');
    });
    $('#draggable').on('hover', function(){
      console.log('DRG M hover');
    });
    $('#draggable').on('mouseleave', function(){
      console.log('DRG M mouseleave');
    });
    $('#draggable').on('mouseout', function(){
      console.log('DRG M mouseout');
    });
    $('#draggable').on('mouseclick', function(){
      console.log('DRG M mouseclick');
    });

    $('#droppable').on('mousedown', function(){
      console.log('DRP M mousedown');
    });
    $('#droppable').on('mouseup', function(){
      console.log('DRP M mouseup');
    });
    $('#droppable').on('mouseenter', function(){
      console.log('DRP M mouseenter');
    });
    $('#droppable').on('hover', function(){
      console.log('DRP M hover');
    });
    $('#droppable').on('mouseleave', function(){
      console.log('DRP M mouseleave');
    });
    $('#droppable').on('mouseout', function(){
     ...