JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<!-- FORMBUILDER -->
<div class="drags">
    <h3>Layout</h3>
    <ul class="dragarea">
        <li data-type="area">area</li>
    </ul>
    <ul class="dragsection">
        <li data-type="section">section</li>
        <li data-type="break">section header</li>
    </ul>
</div>
<div class="drops">
    <div class="droparea">
        <div>
            <section class="dropsection grid">
                <!-- drop section -->
            </section>
        </div>
    </div>
</div>

CSS

*{margin:0; box-sizing:border-box;}
.droparea { padding:10px; border:1px solid #ccc; background-color:#fff;}
.dropsection { padding:10px; background-color:#eee;}
.col { }
.dropblock { padding:10px; background-color:#fff; list-style:none;}
hgroup {padding:10px; background-color:#fff;}
.dropblock li { padding:10px; border:1px solid #ccc; background-color:#efefef;}
.grid { padding:10px; border:1px solid #ccc; background-color:#eee;}
.button { margin-right:5px; cursor:pointer;}

.block-edit-section {margin-top:20px; padding:20px; border:1px solid #ccc; background-color:#eee}

.form { list-style:none; margin:0; padding:0;}
.form li { margin-bottom:10px;}

JavaScript

// version 2
var FormBuilder = (function () {
    var config = {
        Css: {
            Areas: {
                Styles: {
                    Default: false,
                    Important: false,
                    Overwrite: false,
                    Rules: {
                        // box border
                        borderWidth: "0px",
                        borderStyle: "solid",
                        borderColor: "transparent",
                        border: "0px solid transparent",
                        borderTop: "",
                        borderRight: "",
                        borderBottom: "",
                        borderLeft: ""
                    },
                    Options: {
                        grid:"",
                    }
                }
            },
            Sections: {
                Styles: {
                    Default: false,
                    Important: false,
                    Overwrite: false,
                    Rules: {
                        // box border
                        borderWidth: "0px",
                        borderStyle: "solid",
                        borderColor: "transparent",
                        border: "0px solid transparent",
                        borderTop: "",
                        borderRight: "",
                        borderBottom: "",
                        borderLeft: ""
                    },
                    Options: {
                        grid:"",
                    }
                }
            },
            Blocks: {
                Styles: {
                    Default: false,
                    Important: false,
                    Overwrite: false,
                    Rules: {
                        // box border
                        borderWidth: "0px",
                        borderStyle: "solid",
                        borderColor: "transparent",
                        border: "0px solid transparent",
                       ...