JSFiddle - React, Tailwind, and code Playground

by inser

HTML

<span class='ctrls'></span>
<div>
</div>

CSS

div {
    width: 100px;
    height: 100px;
    background: #ccc;
}

JavaScript

var style = {
    updatedCallback: function() { },
    element: {
        elem: {},
        getVal: function() { },
        setVal: function(values) { }
    },
    control: {
            ctrl: { },
            init: function() { },
            dom: function() { return $('<div />'); },
            getVal: function() {  },
            setVal: function(values) { }     
    },
    init: function(element) {
        this.element.elem = element;
        var $this = this;        
        this.control.init();        
        this.control.setVal(this.element.getVal());        
    },        
    updated: function(updated) {
        this.updatedCallback = updated;
    },
    update: function() {         
        this.updatedCallback(); 
    }
};

var height = $.extend({}, style, {
    element: {
        elem: {},
        getVal: function() { return this.elem.height(); },
        setVal: function(values) { this.elem.height(values); }
    },
    
    control: (function(t) {        
        ctrl: getObject('text'),
        init: function() { 
            var $this = this;
            this.ctrl.change(function() {
                t.element.setVal(this.getVal());
            });
        },
        dom: function() { return this.ctrl; },
        getVal: function() { return this.ctrl.val(); },
        setVal: function(values) { this.ctrl.val(values); }
    })(this)    
});


function getObject(type) {
    
    console.log('object created ' + type);
    switch(type) {
        case 'text':
            return $('<input type="text" />');        
        default:
    }
}

console.log('----------------start---------------');
var h = Object.create(height);
//var w = Object.create(width);
var hc = h.control.dom();
//var wc = w.control();

$('.ctrls').append(hc);
//$('.ctrls').append(wc);

h.init($('div'));
w.init($('div'));

h.updated(function() { console.log('h updated'); });
w.updated(function() { console.log('w updated'); });
console.log('----------------end---------------');