JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<div class="wrap">
<div class="drops"></div>
<div class="drags">
    <ul>
        <li class="dragsection" data-type="section" data-role="section">section</li>
        <li class="dragblock" data-type="block" data-role="block">block</li>
        <li class="dragcell" data-type="cell" data-role="cell">cell</li>
    </ul>
    <ul>
        <li class="dragfield" data-type="field" data-role="text" data-content="<p>This is text</p>">text</li>
        <li class="dragfield" data-type="field" data-role="image" data-content="<img src='' alt='image'>">image</li>
        <li class="dragfield" data-type="field" data-role="devider" data-content="<hr>">devider</li>
    </ul>
    <input id="btnSave" type="submit" value="save" />
</div>
</div>

CSS

body   { font-family:arial; font-size:14px;}
.wrap  { overflow:hidden;}
.drops { width:80%; float:left;}
.drags { width:15%; float:left;}

.guide {
    outline: 1px dashed #777; 
    outline-offset:-2px; 
    box-shadow:inset 0 0 0 12px rgba(0,0,0,.1);
    padding:12px;
    min-height: 18px;
}
.ui-sortable-placeholder {
    outline: 1px dashed #777; 
    outline-offset:-2px; 
    box-shadow:inset 0 0 0 2px rgba(0,0,0,.1);
    padding:24px;
    background-color:#a2c4e9;
}
.drops,.dropsection,.dropblock,.dropcell,.dropfield { min-height:24px;}
.t-section:focus,
.t-block:focus,
.t-cell:focus,
.t-field:focus{
    outline:none;
    box-shadow:none;
    border:1px solid #03a9f4;
    position: relative;
}
.t-section:focus > .guide > .menu-editor,
.t-block:focus > .guide > .menu-editor,
.t-cell:focus > .guide > .menu-editor,
.t-field:focus > .guide > .menu-editor{
    display:block !important;
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
}
.menu-editor .buttons { float: right}
.menu-editor .buttons a {
    display:inline-block;
    padding:12px;
    background-color:#eee;
    margin:2px 2px 0 0;
    width:12px;
    height:12px;
}
.menu-editor small {
    display:inline-block;
    padding:3px 6px;
    background-color:#03a9f4;
    color: #fff;
    float: left;
}
.t-block { visibility: none;}

JavaScript

var TemplateBuilder = (function () {
	// configs
    var configs = {};
    // .dropsection
    var dragSection;
    var drops;
    // .dropblock
    var dragBlock;
    var dropSection;
    // .field
    var dragField;
    var dropBlock;

    var vars = {
        Styles: {
            // font
            font_family: "",
            font_size: "",
            color: "",
            // background
            background_color: "",
            // border
            border_width: "",
            border_top_width: "",
            border_right_width: "",
            border_bottom_width: "",
            border_left_width: "",
            border_style: "",
            border_color: "",
            // padding
            padding: "",
            padding_top: "",
            padding_right: "",
            padding_bottom: "",
            padding_left: "",
            // margin
            margin: "",
            margin_top: "",
            margin_right: "",
            margin_bottom: "",
            margin_left: ""
        }
    }

    //
	var defaults = {
		CssStyle: {
            Modifiers: {
                Grid: "",
                Column: ""
            },
            Settings: {
                Wrapper: $.extend(true, {}, vars.Styles),
                Main: $.extend(true, {}, vars.Styles)
            }
        },
        TemplateData: {
        	Sections: [
        		{
        			TempId: 0,
		            ClassName: null,
		            Type: "section",
		            DataRole: "header",
		            ParentPosition: 0,
		            Position: 0,
		            CssStyle: null
        		},
        		{
        			TempId: 1,
		            ClassName: null,
		            Type: "section",
		            DataRole: "nav",
		            ParentPosition: 0,
		            Position: 1,
		            CssStyle: null
        		},
        		{
        			TempId: 2,
		            ClassName: null,
		            Type: "section",
		            DataRole: "section",
		            ParentPosition:...