JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<h2>click and drag the colored boxes to move them..</h2>
<div class="demo">

<div id="draggable-1" ></div>
<div id="draggable-2" ></div>
<div id="draggable-3" ></div>
<div id="draggable-4" ></div>

</div> 
<!-- End demo -->
</body>

CSS

body        {overflow:hidden;}

.demo        {width:800px; height:600px; margin:50px auto 0 auto; border:1px #000 solid;}

#draggable-1    { width:100px; height:100px; padding:0.5em; background:#69F; margin:20px;}
#draggable-2    { width:100px; height:100px; padding:0.5em; background:#F66; margin:20px;}
#draggable-3    { width:100px; height:100px; padding:0.5em; background:#9F9; margin:20px;}
#draggable-4    { width:100px; height:100px; padding:0.5em; background:#FF6; margin:20px;}

h2    {font-family:Verdana, Geneva, sans-serif; text-align:center; margin:30px 0 0 0;}

JavaScript

$(function() {
$( "#draggable-1" ).draggable({ containment: ".demo", scroll: false });
$( "#draggable-2" ).draggable({ containment: ".demo", scroll: false });
$( "#draggable-3" ).draggable({ containment: ".demo", scroll: false });
$( "#draggable-4" ).draggable({ containment: ".demo", scroll: false });

});