JSFiddle - React, Tailwind, and code Playground

by enyojs

HTML

<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>

JavaScript

enyo.kind({
    name: "MySample",
    kind: "FittableRows",
    components: [
        {kind: "onyx.Toolbar", components: [
            {kind:"onyx.Button", ontap:"pop", content:"Popup"}
        ]},
        {kind: "Panels", fit:true, arrangerKind:"CollapsingArranger", narrowFit:false, onTransitionFinish:"transitionFinish", components: [
            {kind:"Panel1"},
            {kind:"Panel2"}
        ]},
        {kind:"onyx.Popup", floating:true, style:"padding:20px; width:100%; height:100px; opacity:0.8;", onHide:"hide", components: [
            {kind:"onyx.Button", style:"width:100%; height:100%;", content:"Button"}
        ]}
    ],
    pop: function() {
        this.$.popup.show();
        this.$.panel1.setDisabled(true);
    },
    hide: function() {
        this.$.panel1.setDisabled(false);
    },
    transitionFinish: function(inSender, inEvent) {
        this.$.panel1.setDisabled(inEvent.toIndex != 0);
    }
});
        
enyo.kind({
    name: "Panel1",
    published: {
        disabled: false
    },
    style:"background:#FAA; width:50%; padding:10px;", 
    components: [
        {kind:"Input"},
        {tag:"br"},
        {name:"link", tag:"a", href:"javascript:alert('tap')", content:"Link Tag"}
    ],
    create: function() {
        this.inherited(arguments);
        this.disabledChanged();
    },
    disabledChanged: function() {
        this.$.input.setDisabled(this.disabled);
        this.$.link.setAttribute("href", this.disabled ? "javascript:null" : this.$.link.href);
    }
});
        
enyo.kind({
    name: "Panel2",
    style:"background:#8F8; width:50%; opacity:0.8;"
});

new MySample({fit:true}).write();