JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id=container1 style=background-color:red;padding=20px>
    <div class=draggableContainer>
        <div class=draggable style=background-color:blue;width:200px;height:200px;>
            
        </div>
    </div>
    <div class=draggableContainer>
        <div class=draggable style=background-color:yellow;width:200px;height:200px;>
        </div>
    </div>
    <div class=draggableContainer>
    </div>
</div>

CSS

.draggableContainer{
    width:250px;
    height:250px;
    background-color:white;
    margin:20px;
    position:relative;
        
}

JavaScript

$('.draggable').draggable({ revert: "invalid",snap: ".draggableContainer" });

$('.draggableContainer').droppable()