JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position: absolute; top: 0; left: 300px; width: 520px;">
	<iframe id="DropFrame" src="http://fiddle.jshell.net/pFNMt/show/light/" style="width: 520px; height: 600px;" ></iframe>
</div>

<div class="draggable">Ollie</div>
<div class="draggable">Kevin</div>
<div class="draggable">emailbuilder</div>

CSS

.draggable {
    width: 200px;
    height: 40px;
    display: block;
    background: orange;
}

JavaScript

$(document).on('ready', function () {
    
    $('.draggable').draggable({
        cursorAt: {
            top: -5,
            left: -5,
        },
        iframeFix: true,
        helper: 'clone'
    });

    $('#DropFrame').on('load', function () {
        $(this).contents().find('.droppable').droppable({
            hoverClass: 'ui-state-active',
            greedy: true
        });
    });
});