JSFiddle - React, Tailwind, and code Playground

HTML

<div id="toolbar" style="z-index:1;position:fixed;background-color:#dddddd;left:0;top:0;right:0;height:60px">
<div class="widgeticon" style="background-color:green"></div>
</div>
<div id="spacer"></div>

<div id="contentcontainer">
	<div class="widget">
	</div>
	<div class="widget">
	</div>
	<div class="widget">
	</div>
	<div class="widget">
	</div>
	<div id="tabs1" class="tabs">
		<ul>
			<li><a href="#tabs1_1">Tab 1</a></li>
			<li><a href="#tabs1_2">Tab 2</a></li>
		</ul>
		<div id="tabs1_1" class="tabcontent">
			<div class="widget">
			</div>
		</div>
		<div id="tabs1_2" class="tabcontent">
			<div class="widget">
			</div>
			<div class="widget">
			</div>
			<div class="widget">
			</div>
		</div>
	</div>
</div>

CSS

.tabs .tabcontent		{	min-height: 50px;	}
#contentcontainer		{	margin:60px 0 0 0;min-height: 50px;	}


#toolbar .widgeticon	{	display: inline-block;	}
.widgeticon,.widget	{	height:55px;background-color:#0000FF;width:55px;margin:2px;cursor: move;	}
.tabs					{	cursor: move;	}


.divContentOn {
	border:1px outset #CCCCCC;cursor:move
}
.divContentOff {
	border:1px outset #CCCCCC transparent;cursor:move
}

.placeholder {
    border: 2px dashed #BBBBBB;
    font-weight: bold;
    font-size: 45px;
	height: 30px;
    background-color: #EEEEEE;

JavaScript

$(document).ready(function(){
	$(".tabs").tabs();

	//initialize assets
	initAssets();
});

function initAssets()
{
	$( ".widgeticon" ).draggable({
		helper: "clone"
		,connectToSortable: ".tabcontent:visible,#contentcontainer"
    });
	$( ".tabcontent,#contentcontainer" ).sortable({
		axis					: 	"y"
		,opacity				: 	.75
		,connectWith			:	".tabcontent,#contentcontainer"
		,cursor					:	"move"
		,placeholder			: 	"placeholder"
		,receive: function(ev,ui){	
			initAssets();
		}
	});			
}