JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/dbunic/REDIPS_drag/master/redips-drag-min.js"></script>
<script src="https://raw.github.com/dbunic/REDIPS_table/master/redips-table-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>
                   ...

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...

JavaScript

"use strict";

// define redips object container
// should be exposed as window object for jsFiddle example (dbunic)
window.redips = {};

// 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.rowMoved =...