JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css">
<div class="demo">
    
    <div class="draggable ui-widget-content correct"><p>1</p></div>
    <div class="draggable ui-widget-content"><p>2</p></div>
    <div class="draggable ui-widget-content"><p>3</p></div>
    <div class="draggable ui-widget-content"><p>4</p></div>
    <br style="clear: both">
    <div id="droppable" class="ui-widget-header">
        <p>Drop here</p>
    </div>
    
</div>

CSS

.draggable { width: 50px; height: 50px; 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({ revert: true });
    
 $("#droppable").droppable({
  activeClass: 'ui-state-hover',
  hoverClass: 'ui-state-active',
  // uncomment the line below to only accept the .correct class..
  // Note: the "drop" function will not be called if not ".correct"
  //  accept : '.correct',
  drop: function(event, ui) {
   // alternative method:
   // if (ui.draggable.find('p').text() == "1") {
   if (ui.draggable.is('.correct')) {
    $(this).addClass('ui-state-highlight').find('p').html('You got it!');
    // cloning and appending prevents the revert animation from still occurring
    ui.draggable.clone(true).css('position', 'inherit').appendTo($(this));
    ui.draggable.remove();
   } else {
    $('#droppable > p').html('Not that one!')
    setTimeout(function(){ $('#droppable > p').html('Drop here'); }, 1000);
   }
  }
 });
    
});