JSFiddle - React, Tailwind, and code Playground

by antixrist

HTML

<script src="https://raw.githubusercontent.com/jashkenas/underscore/master/underscore-min.js"></script>
<script src="https://raw.githubusercontent.com/jashkenas/backbone/master/backbone-min.js"></script>
<script src="https://raw.githubusercontent.com/afeld/backbone-nested/master/backbone-nested.js"></script>
<script src="https://raw.githubusercontent.com/alexbeletsky/backbone-computedfields/master/lib/backbone.computedfields.js"></script>
<script src="https://raw.githubusercontent.com/mikeric/rivets/master/dist/rivets.bundled.min.js"></script>
<div id="tpl">
    <h3>{- layer:dimentions.type }</h3>
    { layer:position.type }
    <aside rv-if="layer:position.type | 'static'">
        { layer:position.type }
    </aside>
    
</div>

JavaScript

var Layer = Backbone.NestedModel.extend({});

var unitValue = {
    value: '',
    unit: 'px', // or '%'/'em'
};
var defaultDimentions = {
    width: unitValue,
    height: unitValue,
};
var defaultPositions = {
    top: unitValue,
    right: unitValue,
    bottom: unitValue,
    left: unitValue,
};
var defaultColor = {
    type: 'hex', // or 'rgba'
    hex: {
        value: '#ff0000',
    },
    rgba: {
        r: '0',
        g: '0',
        b: '0',
        a: 1,
    }
}; 

var layer = new Layer({
    asd: 'zxc',
    dimentions: {
        type: 'fixed', // or 'content'
        fixed: defaultDimentions,
        content: {
            min: defaultDimentions,
            max: defaultDimentions, 
        }
    },
    position: {
        type: 'static', // or 'absolute'
        static: {},
        absolute: {
            gravity: {
                x: 'center', // or 'top'/'right'/'bottom'/'left'
                y: 'center', // or 'top'/'right'/'bottom'/'left'
            },
            offset: defaultPositions,
        },
    },
    design: {
        margin: defaultPositions,
        padding: defaultPositions,
        shadow: {
            x: unitValue,
            y: unitValue,
            blur: unitValue,
            spread: unitValue,
            inset: 0, // or '1'
            color: defaultColor,
        },
        opacity: 1,
        overflowHidden: 0,
        blur: 0,
        backgrounds: [{
            type: 'color', // or 'gradient'/'image'
            image: {
                url: '',
                gravity: {
                    x: 'center', // or 'top'/'right'/'bottom'/'left'
                    y: 'center', // or 'top'/'right'/'bottom'/'left'
                },
                repeat: false, // or true/'x'/'y'
                size: {
                    x: unitValue, // or 'auto'
                    y: unitValue, // or 'auto'
                }, // or 'cover'/'contain'
                color: defaultColor,
            },
            gradient: {
         ...