JSFiddle - React, Tailwind, and code Playground

by ajai jothi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.0/js/bootstrap-colorpicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.0/css/bootstrap-colorpicker.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<textarea name="" id="" cols="60" rows="10"></textarea>
<button>Generate Theme</button>

CSS

body {
    background: #fff;
    color:#333;
}
textarea {
    width:100%;
    border:1px solid green;
    border-radius:5px;
}
.themify a.__close{
    color:red;
    cursor:pointer;
}
.themify-popup{
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    width:100%:
    max-width:400px;
    box-shadow:#ccc 0 0 5px;
    background: #fff;
    border:1px solid #eee;
    overflow:auto !important;
    display:none;
}
.themify-popup a{ color:#333; }
.themify-head{
    background: #333;
    padding:10px;
    font-size: 12px;
    color:#ccc;
}
.themify-toggler {
    border:1px solid #ddd;
    background: white;
    position:absolute;
    right:0;
    top:10px;
    color:#333;
    padding:5px 10px;
    font-weight: bold;
    cursor:pointer;
}
.themify th {
    position:relative;
    background: #ddd;
}
.themify input {
    border:none;
    font-size:12px;
    width:100%;
    padding:10px 5px;
}
.themify tr td:nth-child(2) {
    padding:0;
}
.themify a, .themify th span {
    cursor:pointer;
}
.themify th span {
    float:right;
    font-size:11px;
    font-weight:lighter;
}
.themify .themify-advanced {
    display:none;
}
.themify .themify-advanced td {
    background: lightyellow;
}
.themify-selected-item {
    outline:2px solid orange !important;
}
.themify select {
    width:100%;
    border-radius:0;
    font-size:12px;
    padding:3px 7px;
    background: white;
    border-color:#ddd;
    position:relative;
    color:#333;
}
.themify select:after {
    content:"";
    width: 0;
    height: 0;
    position:absolute;
    border:5px solid transparent;
    border-top-color:#333;
    top: 0;
    right: 0;
}

JavaScript

"use strict";
(function ($, window, document, undefined) {
    var popup = $('<div class="themify-popup"/>');
    function getThemeObject() {
        var sheets = [];
        var attr = [].slice.call(arguments);
        var cnt = 0;
        [].forEach.call(document.styleSheets, function (sheet) {
            if (!sheet.cssRules) return false;

            var ruleList = {};
            [].forEach.call(sheet.rules, function (rule) {
                return rule.style && [].forEach.call(rule.style, function (style) {
                    ruleList[rule.selectorText] = ruleList[rule.selectorText] || [];
                    ruleList[rule.selectorText].push({
                        node: rule.style,
                        attr: style,
                        default: (attr.indexOf(style) >= 0),
                        oldValue: rule.style.getPropertyValue(style),
                        newValue: rule.style.getPropertyValue(style)
                    });
                });
            });

            sheets.push({
                name: (sheet.ownerNode.nodeName.toLowerCase() == 'style' && (++cnt)) ? 'Internal Style ' + cnt : sheet.href,
                rules: ruleList
            });
        });

        return sheets;
    }


    function getColorStyles() {
        var _editableStyleList = [];
        for (var style in document.body.style) {
            if (/(color|Color)/.test(style)) {
                _editableStyleList.push(style.replace(/([A-Z]+)/g, ("-" + '$1')).toLowerCase());
            }
        }
        return _editableStyleList;
    }

    function applyRule(ruleObj) {
        return function () {
            ruleObj.newValue = this.value;
            console.log(ruleObj.node, ruleObj.attr, this.value);
            ruleObj.node.setProperty(ruleObj.attr, this.value);
        };
    }

    function highlightSelectorElement(sel) {
        return function (e) {
            e.stopPropagation();
           ...