JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<div id="container">
<div id="d1" class="draggable" >
<p>Drag me around</p>
</div>

<div id="d2" class="draggable col1" >
<p>Drag me around</p>
</div>

<div id="d3" class="draggable col2" >
<p>Drag me around</p>
</div>
</div>

CSS

#container { 
    width: 280px; 
    height: 300x; 
    padding: 0.5em; 
    border-width:1px;
    border-style:solid;
    border-color:black;
}
.draggable { 
    width: 80px; 
    height: 80px; 
    padding: 0.5em; 
    border-width:1px;
    border-style:solid;
    border-color:black;
 
}
.col1 {
background-color: #b0c4de; 
}

.col2 {
background-color: #fcd4de; 
}

JavaScript

$(function(){
$( ".draggable" ).draggable({ containment: "#container", scroll: false });
});