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({
    kind:'enyo.Control',
    
    name:'Page',
    
    components:[
        {kind:'onyx.Button', 
         content:'Popup', 
         ontap:'showPopup'},
        
        {kind:'onyx.Popup', 
         name:'popup', 
         handlers: {
             ondown:"preventDefault"
         },
         centered: true, 
         scrim:true, 
         modal: true, 
         autoDismiss:false, 
         floating: true, 
         style:'top: 90.5px !important;left: 60.5px !important;',
         components:[
            {kind:'onyx.Button', content:'Close', ontap:'hidePopup'}
        ],
         preventDefault: function(inSender, inEvent) {
             inEvent.preventDefault();
         }
        },
        
        {kind:'onyx.Input', 
         style:'width:200px;height:200px;display:block;', 
         value:'big input...'}
    ],
    
    showPopup : function(){
        this.$.popup.show();
    },
    
    hidePopup : function(){
        this.$.popup.hide();                
    },
    
    changeColor : function(inSender){
        inSender.applyStyle('background-color', 'red');
    }
    
});


new Page().renderInto(document.body);