JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<link rel="stylesheet" href="http://content.web/content/shared/stylesheets/xero.css">

CSS

body {
    background-color: yellow;
}

.x-panel {
    background-color: #fff;    
}

.x-toolbar .x-box-inner {
    padding-left: 20px;
    padding-right: 20px;
    width: auto;    
}

.x-toolbar .x-box-inner .x-toolbar-item:first-child {

}

.x-toolbar .x-box-inner .x-toolbar-item:last-child {

}

JavaScript

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 600,
    fbar: {
        width: 560,
        items: [
            {
            xtype: 'label',
            html: '<a href="#" class="text red">Cancel activation</a>',
            // Y U NO WORK ;(
            listeners: {
                click: {
                    fn: function() {
                        alert('cancel activation');
                    },
                    preventDefault: true
                }
            }},
            '->',
        {
            text: 'Update feed login',
            cls: 'blue',
            handler: function() {
                alert('update feed login');
            }},
        {
            text: 'Cancel',
            handler: function() {
                alert('cancel');
            }}
        ]
    }
});