JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<body>
 <div>He is a <input id="droppable" style="display:inline">  __________________  </div></input>
<div id="draggable1">
  <p>boy</p>
    
</div>
<div id="draggable2">
  
    <p>girl</p>   
</div>    
</body>

CSS

body {
	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
	font-size: 62.5%;
}

JavaScript

$(function() {
    $( "#draggable1" ).draggable();
    $( "#droppable" ).droppable();
    $( "#draggable2" ).draggable();
  });