JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/touch/resources/css/sencha-touch.css">
<script src="http://dev.sencha.com/deploy/touch/sencha-touch.js"></script>

JavaScript

Ext.setup({
    onReady: function() {
        
        var form = new Ext.form.FormPanel({
            autoRender: true,
            floating: true,
            modal: true,
            centered: true,
            
            //Toggle this value and click RUN to see the effect
            hideOnMaskTap: true,
            
            height: 250,
            width: 300,
            items: [{
                xtype: 'textfield',
                label: 'Name',
                value: 'John Doe'
            }],
            dockedItems:[{
                xtype: 'toolbar',
                dock: 'bottom',
                items:[{
                    text: 'Save',
                    ui: 'confirm',
                    handler: function() {
                        Ext.Msg.alert('Save fail!', 'Fail', function() {
                            //300ms delay, then we mask the body again
                            setTimeout(function() {
                                Ext.getBody().mask();
                            }, 300);
                        });
                    }
                }]
            }]
        });
        
        form.show();
    }
});