JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<script src="http://cmrdemo.com/websites/partnerportal/template/scripts/jquery.injectcss.js"></script>
<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>
    
    <hr />
    <section id="editor" class="editor">
	<nav>
		<div class="buttons"></div>
	</nav>
	<header>
		<ul>
			<li><a data-toggle="tab"></a></li>
			<li><a data-toggle="tab"></a></li>
			<li><a data-toggle="tab"></a></li>
			<li><a data-toggle="tab"></a></li>
		</ul>
	</header>
	<main>
		<div id="panelDesign" class="panel">
			<main>

			</main>
		</div>
		<div id="panelEdit" class="panel">
			<main>

			</main>
		</div>
		<div id="panelStyle" class="panel">
			<main>
				<div class="panel">
					<a data-toggle="collapse" data-target="#collapsible_1" data-parent="">Background</a>
					<ul id="collapsible_1" class="formfield">
						<li class="field">
							<label class="field-label">Background Color</label>
							<div class="field-control">
								<input type="text" class="textbox" data-key="background_color_container" />
							</div>
						</li>
					</ul>
					<a data-toggle="collapse" data-target="#collapsible_2" data-parent="">Border</a>
					<ul id="collapsible_2" class="formfield">
						<li class="field">
							<label class="field-label">Options</label>
							<div class="field-control">
								<span class="checkboxlist">
									<label>
										<input type="checkbox"...

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;
    z-index: 1;
}
.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;}

.nav,
.subnav { 
	padding: 0; 
	margin: 0; 
	list-style: none;
}
.nav li {
	position: relative; 
}
.nav a {
	display: block;
	text-decoration: none;
	line-height: 0;
	outline: 0;
	white-space: nowrap;
	padding: 24px 16px;
	color: #333;
}
.nav a:hover {
	background-color: #ddd;
}
.subnav {
	background-color: #ddd;
    display:none;
}
.subnav li {
	width: 100%;
}
.subnav a {
}
.subnav a:hover {
	background-color: #ccc;
}

.dropdown > a:after,
.branch > a:after {
	display: inline-block;
	font-family: 'icon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing:...

JavaScript

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

    var vars = {
        TemplateCss: {
            // font
            font_family: "",
            font_size: "",
            line_height: "",
            color: ""
        },
        BlockCss: {
            Settings: {
                Grid: "",
                Column: "",
                Float: ""
            },
            Styles: {
                // background
                background: "",
                background_color: "",
                background_image: "",
                background_repeat: "",
                background_attachment: "",
                background_position: "",
                background_size: "",
                // border
                border_width: "1px",
                border_top_width: "0px",
                border_right_width: "",
                border_bottom_width: "",
                border_left_width: "",
                border_style: "solid",
                border_color: "",
                // padding
                padding: "",
                padding_top: "",
                padding_right: "",
                padding_bottom: "",
                padding_left: "",
                // margin
                margin: "",
                margin_top: "",
                margin_right: "",
                margin_bottom: "",
                margin_left: ""
            }
        },
        FieldCss: {
            Settings: {
                Nav: {

                }
            },
            Styles: {
                Nav: {
                    color: "",
                    background_color: ""
                }
            }
            
        }
    }

    //
    var defaults = {
        TemplateCss: {

        },
        BlockCss: {
...