JSFiddle - React, Tailwind, and code Playground

HTML

<div id="draggable2">
    <p>semitransparent clone</p>
</div>
<div id="droppable">
    <p>Drop Here</p>
</div>

CSS

#draggable2 {
	    width: 90px;
	    height: 90px;
	    padding: 0.5em;
	    border :5px solid gray;
	    background-color: none;
	    display: inline-block;
	    margin-right: 50px;
	    vertical-align:middle;
	}
	#droppable {
	    width: 120px;
	    height: 120px;
	    padding: 0.5em;
	    border :5px solid black;
	    background-color: #777;
	    display: inline-block;
	    vertical-align:middle;
	}
	.drag-helper {
	    width: 50px;
	    height: 50px;
	    padding: 0.5em;
	    border :5px solid gray;
	    background-color: none;
	    display: inline-block;
	    margin-right: 50px;
	    vertical-align:middle;
	    opacity: 0.5;
	    border-radius: 100%;
	}
	.outerwrapper {
	    width: 100%;
	    height: 100%;
	    display: inline-block;
	}

JavaScript

$(document).ready(function () {
		    $("#draggable2").draggable({
		        // opacity : 0.7, 
		        helper: "clone",
		        scope: 1,
		        start: function (e, ui) {
		            $(ui.helper).addClass("drag-helper");
		            console.log(ui);
		        }
		    })
		    $("#droppable").droppable({
		        drop: function () {
		            var cloned = $("#draggable2").clone().css({
		                "margin": "0"
		            })
		            $(this).css("background-color", "green");
		            if ($(".outerwrapper").length == 0) {
		                $(this).wrapInner("<div class = 'outerwrapper'></div>");
		            }
		            $(".outerwrapper").append(cloned)
		            $(this).css("height", "100%");

		        },
		        scope: 1
		    })
		});