JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/dbunic/REDIPS_drag/master/redips-drag-min.js"></script>

		<!-- tables inside this DIV could have draggable content -->
		<div id="drag">
			<!-- left container -->
			<div id="left">
				<div class="instructions">
				<strong>Building blocks</strong>
				<br/>
				Drag blocks to the right to build your application.
				</div>
				<table id="tblComponents">
					<colgroup>
						<col width="150"/>
					</colgroup>
					<tbody>
						<tr><td class="mark"><div class="drag clone" id="te1">Text</div></td></tr>
						<tr><td class="mark"><div class="drag clone" id="co1">Contacts</div></td></tr>
						<tr><td class="mark"><div class="drag clone" id="ca1">Category</div></td></tr>
						<tr><td class="mark"><div class="drag clone" id="da1">Date picker</div></td></tr>
						<tr><td class="mark"><div class="drag clone" id="li1">Link</div></td></tr>
						<tr><td class="mark"><div class="drag clone" id="im1">Image</div></td></tr>
						<tr><td class="mark"><div class="drag clone" id="vs1">Video sharing</div></td></tr>
						<tr><td class="mark"><div class="drag clone" id="go1">Google Map</div></td></tr>
						<tr><td class="mark"><div class="drag clone" id="qu1">Question</div></td></tr>
						<tr><td class="mark"><div class="drag clone" id="nu1">Number</div></td></tr>
						<tr><td class="mark"><div class="drag clone" id="mo1">Money</div></td></tr>
						<tr><td class="mark"><div class="drag clone" id="du1">Duration</div></td></tr>
						<tr><td class="mark"><div class="drag clone" id="ps1">Progress slider</div></td></tr>
						<tr><td class="mark"><div class="drag clone" id="ca2">Calculation</div></td></tr>
						<tr><td class="mark"><div class="drag clone" id="ap1">App reference</div></td></tr>
					</tbody>
				</table>
			</div><!-- left container -->
			
			<!-- right container -->
			<div id="right">
				<!-- toolbox -->
				<table id="tblToolbox">
					<tbody>
						<tr>
							<td class="mark">
								<input type="button"...

CSS

/*

Darko Bunic
http://www.redips.net/
Apr, 2012.

*/

body {
	font-family: arial;
	margin: 0px;
}

/* drag object (DIV elements) */
.drag {
	margin: 2px auto;
	/* needed when details container is displayed to be wrapped nicely */
	display: table;
	text-align: center;
	width: 120px;
	height: 28px;
	line-height: 28px;
	color: #555;
	border: 1px solid #bebebe;
	background-color: #dbdbdb;
	/* round corners */
	border-radius: 4px;
	/* opacity */
	opacity: 0.9;
	filter: alpha(opacity=90);
}

/* drag container*/
#drag {
	margin: 20px auto;
	background-color: #f6f6f6;
	border: 2px dashed LightBlue;
	width: 1200px;
	display: table;
	font-size: 10pt;
}
		/* left table (components) */
		#left {
			margin-right: 20px;
			width: 150px;
			float: left;
			/* needed for IE8 to calculate width of left container */
			border-bottom: 1px solid white;
		}
		/* right table (table editor) */
		#right {
			margin-top: 10px;
			float: left;
			background-color: white;
			border: 1px solid #eee;
			/* round corners */
			border-radius: 4px;
		}


/* both tables inside drag container */
div#drag table {
	border-collapse: collapse;
	border-spacing: 1px;
}


/* left table - table with components */
#tblComponents {
	margin: 4px;
}
	table#tblComponents td {
		height: 34px;
		width: 80px;
		border: 1px solid #f6f6f6;
	}	


/* right table - table editor */
#tblEditor {
	color: #777;
	margin: 7px;
	z-index: 0;
}
	/* only TD for table editor (and not for any other descendant node)*/
	table#tblEditor > tbody > tr > td {
 		border: 1px solid #ddd;
		padding: 0px;
		text-align: center;
		height: 35px;
/* 		width: 500px; */
	}
	/* style for form elements */
	#tblEditor input {
		cursor: auto;
	}


/* instructions below left table */
.instructions {
	width: 130px;
	margin: 15px;
	font-size: 11px;
	color: #333;
	text-align: center;
}

/* component header inside DIV element*/
/* title, + and X are placed in one row table */
.cHeader {
	margin: 0px 5px;
}
	.cHeader td {
		height: 22px;
	}
	/* "+"...

JavaScript

"use strict";

// define redips object container
var redips = {};
var redipsInit;

// configuration
redips.configuration = function () {
	redips.components = 'tblComponents';// left table id (table containing components)
	redips.tableEditor = 'tblEditor';	// right table id (table editor)
	redips.tableEditorDivs = document.getElementById(redips.tableEditor).getElementsByTagName('DIV');	// live collection of DIV elements inside table editor
	redips.ajaxField = 'db_field.php';	// get component details (via AJAX)
	redips.ajaxSave = 'db_save.php';	// save page (via AJAX)
	redips.cDetails = 'cDetails';		// component detail class name (it should be the same as is in CSS file)
	redips.markedColor = '#A9C2EA';		// marked cells background color
	// layout (HTML code) for component placed to the table editor 
	redips.component =	'<table class="nolayout cHeader"><tr><td class="hLeft" onclick="redips.details(this)">+</td><td class="hTitle">|</td><td class="hRight" onclick="redips.divDelete(this)">x</td></tr></table>' +
						'<div class="' + redips.cDetails + '">|</div>';
};


// initialization
redips.init = function () {
	// define reference to the REDIPS.drag and REDIPS.table object
	var rt = REDIPS.table,
		rd = REDIPS.drag;
	// configuration
	redips.configuration();	
	// attach onmousedown event handler to tblEditor
	rt.onmousedown(redips.tableEditor, true);
	// selected cell background color
	rt.color.cell = redips.markedColor;
	// disable marking not empty table cells
	rt.mark_nonempty = false;
	// create XMLHttp request object
	redips.request = redips.initXMLHttpClient();
	// initialize REDIPS.drag library
	rd.init();
	// set drop mode as "single" - DIV element can be dropped only to the empty cells
	rd.dropMode = 'single';
	// event handler invoked on click on DIV element


  rd.rowDropMode = 'after';
	rd.event.rowClicked = function () {
		// set current element (this is clicked TR)
		var el = rd.obj;
		// find parent table
		el = rd.findParent('TABLE',...