JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<div class="wrap">
<section class="drags">
    <div class="block">
        <header class="header block-header"><h4>Layout</h4></header>
        <div class="main block-main">
            <ul>
                <li class="dragarea" data-type="area" data-content="content">area</li>
                <li class="dragsection" data-type="section" data-content="content">section</li>
                <li class="dragblock" data-type="block" data-content="form">form</li>
                <li class="dragblock" data-type="block" data-content="grid">gridview</li>
            </ul>
        </div>
    </div>
</section>

<section class="drops">
    <!-- drops stage -->
</section>
</div>
<!--
<section class="drops">
    <div>
        <div class="droparea">
            <div>
                <section class="dropsection">
                    <div>
                        <div class="dropblock">
                            <div></div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</section>
-->

CSS

* { box-sizing: border-box;}
body { font:12px arial;}
h1,h2,h3,h4,p {margin:0; padding:0;}
ul { margin:0; padding:0; list-style:none;}
/* todo form drop padding needed vs main grobal setting */
ul { padding:10px;}
.wrap { display:table; width:95%;};
.drags  { width:150px;}
.drops  {}
.drags, .drops { display:table-cell; vertical-align:top; padding:10px;}
.droparea, .dropsection, .dropblock {}

/* global block layout */
.area, .section, .block    { border:1px solid #eee; margin-bottom:15px;}
.header, .main, .footer    { padding:10px}
.header                    {border-width:0; border-bottom:1px solid #eee;}



/* global modifier group block layout */
.area        {}
.area-header {}
.area-body   {}
.area-footer {}

.section        {}
.section-header {}
.section-body   {}
.section-footer {}

.block          {}
.block-header   {}
.block-body     {}
.block-footer   {}

/* components */
.control { background-color:#ccc; position:absolute; top:0; right:0; z-index:1;}
.button  { display:inline-block; padding:5px; cursor:pointer;}

/* table */
.table       { width:100%; padding:0; margin:0; border-collapse:collapse; margin-bottom:15px;}
.table thead { text-align:left; background-color:#f8f8f8;}
.table tbody {}
.table tfoot {}

.table th, .table td { border:1px solid #eee; padding:5px;}

/* clear last margin */
.main > *:last-child,
.main > *:last-child > *:last-child,
.main > *:last-child > *:last-child > *:last-child { margin:0;}

.block > *:last-child,
.block > *:last-child > *:last-child,
.block > *:last-child > *:last-child > *:last-child { margin:0;}

/* modifier */
.rel { position:relative;}
.abs { position:absolute;}
.fix { position:fixed;}




.colorPicker-picker {
    height: 16px;
    width: 16px;
    border: 1px solid #333;
    cursor: pointer;
    display: inline-block;
}

.colorPicker-palette {
    width: 110px;
    border: 1px solid #333;
    position: absolute;
    background-color: #eeeeee;
    padding: 2px;
    z-index: 1000;
}

.colorPicker-swatch {
   ...

JavaScript

// PLUGIN COLOR PICKER
(function ($) {
    /**
    * Create a couple private variables.
    **/
    var selectorOwner,
        activePalette,
        cItterate = 0,
        templates = {
            control: $('<div class="colorPicker-picker">&nbsp;</div>'),
            palette: $('<div id="colorPicker_palette" class="colorPicker-palette" />'),
            swatch: $('<div class="colorPicker-swatch">&nbsp;</div>'),
            hexLabel: $('<label for="colorPicker_hex">Hex</label>'),
            hexField: $('<input type="text" id="colorPicker_hex" />')
        },
        transparent = "transparent",
        lastColor;

    /**
    * Create our colorPicker function
    **/
    $.fn.colorPicker = function (options) {

        return this.each(function () {
            // Setup time. Clone new elements from our templates, set some IDs, make shortcuts, jazzercise.
            var element = $(this),
                opts = $.extend({}, $.fn.colorPicker.defaults, options),
                defaultColor = $.fn.colorPicker.toHex(
                        (element.val().length > 0) ? element.val() : opts.pickerDefault
                    ),
                newControl = templates.control.clone(),
                newPalette = templates.palette.clone().attr('id', 'colorPicker_palette-' + cItterate),
                newHexLabel = templates.hexLabel.clone(),
                newHexField = templates.hexField.clone(),
                paletteId = newPalette[0].id,
                swatch, controlText;


            /**
            * Build a color palette.
            **/
            $.each(opts.colors, function (i) {
                swatch = templates.swatch.clone();

                if (opts.colors[i] === transparent) {
                    swatch.addClass(transparent).text('X');
                    $.fn.colorPicker.bindPalette(newHexField, swatch, transparent);
                } else {
                    swatch.css("background-color", "#" + this);
                   ...