JSFiddle - React, Tailwind, and code Playground

by Adambasszer

HTML

<input id="createPanel" type="button" value="Create a new panel" /><br/>
<textarea id="newContent"></textarea>
<div id="panelsContainer"></div>

JavaScript

YUI().use('panel', 'node', 'dd-plugin', function(Y) {
    var panels = [];

    Y.on("click", function(e) {
        var containterDiv = Y.one('#panelsContainer'),
            newDiv = Y.Node.create('<div id="myPanel-' + (panels.length + 1) + '"></div>'),
            pnlRegular, lastPanel;

        newDiv.appendTo(containterDiv);

        pnlRegular = new Y.Panel({
            srcNode: newDiv,
            render: true,
            visible: true,
            width: 500,
            draggable: true,
            headerContent: 'HEADER',
            footerContent: 'FOOTER',
            buttons: [{
                value: '<img src="http://www.torta.hu/design/delete.png"/>',
                section: 'header',
                action: function(e) {
                    e.preventDefault();
                    pnlRegular.set('largeContent', '');
                    pnlRegular.set('smallContent', '');
                    pnlRegular.set('bodyContent', '');
                    pnlRegular.render();
                    pnlRegular.show();
                }},
            {
                value: '<img src="http://docs.gimp.org/en/images/dialogs/stock-edit-16.png"/>',
                section: 'header',
                action: function(e) {
                    e.preventDefault();
                    var newContent = Y.one('#newContent').get('value');
                    pnlRegular.set('largeContent', newContent);
                    pnlRegular.set('smallContent', 'small');
                    pnlRegular.set('bodyContent', pnlRegular.get('largeContent'));
                    pnlRegular.render();
                    pnlRegular.show();
                }},
            {
                value : "close",
                section: 'header',
                action: function(e) {
                    e.preventDefault();
                    pnlRegular.destroy();
                    panels.pop(pnlRegular);
                }},
            {
                value: "RESIZE",
                section:...