JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<script src="http://cmrdemo.com/websites/partnerportal/template/scripts/script.js"></script>
<script src="http://cmrdemo.com/websites/partnerportal/template/scripts/plugin.injectcss.js"></script>
<script src="https://cmrdemo.com/websites/partnerportal/template/scripts/plugin.minicolors.js"></script>
<script src="https://cmrdemo.com/websites/partnerportal/template/scripts/plugin.summernote.js"></script>
<div class="wrap">
<div class="drops template tpl-fixed" data-template-id="0">
    <a href="">link</a>
    <input type="button" value="Button" class="button btn-primary"/>
</div>
<section id="editor" class="editor">
	<nav>
		<div class="buttons"></div>
	</nav>
	<header>
		<ul>
			<li><a data-toggle="tab">Content</a></li>
			<li><a data-toggle="tab">Design</a></li>
			<li><a data-toggle="tab">Setting</a></li>
		</ul>
	</header>
	<main>
		<div id="panelContent" class="panel">
			<main>
				<div data-panel="1" class="panel">
					<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>
					</div>
				</div>
				<div data-panel="2" class="panel" style="display:none;">
					2
				</div>
				<div data-panel="3" class="panel" style="display:none;">
					<div data-field="1">
						<a data-toggle="collapse" data-target="#collapsePanel-3-1-1" data-parent="">Image</a>
						<ul id="collapsePanel-3-1-1" class="formfield">
							<li class="field">
								<label...

CSS

body   { font-family:arial; font-size:14px;}
.wrap  { overflow:hidden;}
.drops { width:75%; float:left;}
.editor { width:25%; float:left;}

.button { background-color:#333; color:#fff; border:none;}
.button:hover { background-color:#000;}

.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 li a {
	display: block;
	text-decoration: none;
	line-height: 0;
	outline: 0;
	white-space: nowrap;
	padding: 24px 16px;
	color: #333;
}
.nav li a:hover {
	color: #333;
    background-color: #ddd;
}
.subnav {
	background-color: #ddd;
    display:none;
}
.subnav li {
	width: 100%;
}
.subnav li a {
}
.subnav li a:hover {
	background-color: #ccc;
}

.dropdown > a:after,
.branch > a:after {
	display: inline-block;
	font-family:...

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: {
            Settings: {
                Template: {
                    layout: "tpl-fixed",
                    theme: ""
                }
            },
            Styles: {
                Template: {
                    // background
                    background_image: "",
                    background_color: "",
                    background_repeat: "",
                    background_attachment: "",
                    background_position: "",
                    // font
                    font_family: "",
                    font_size: "",
                    color: ""
                },
                Link: {
                    color: "",
                },
                Button: {
                    color: "",
                    background_color: ""
                }
            }
        },
        BlockCss: {
            Settings: {
                Block: {
                    grid: "",
                    column: "",
                    float: ""
                }
            },
            Styles: {
                Block: {
                    // background
                    background_image: "",
                    background_color: "",
                    background_repeat: "",
                    background_attachment: "",
                    background_position: "",
                    // border
                    border_width: "",
                    border_top_width: "",
                    border_right_width: "",
                    border_bottom_width: "",
                    border_left_width: "",
                    border_style: "",
                    border_color: "",
                    //...