JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<link rel="stylesheet" href="https://dl.dropbox.com/u/10293511/ext-all.css">

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
}


.x-btn {
    margin-left: 4px;
    margin-right: 4px;
    font-size: 16px;
}

.x-btn:first-of-type {
    /*margin-left: 0px;*/    
}

.x-btn:last-of-type {
    /*margin-right: 0px;*/   
}


.button-delete,
.x-btn.button-delete button {
    color: #f00;    
}

.button-cancel,
.x-btn.button-cancel button {
    color: #00f;    
}

.button-save,
.x-btn.button-save {
    padding: 1px 3px;
    background-color: #00f;
    border: 1px solid #00c;  
    border-radius: 4px;    
}

.button-save button,
.x-btn.button-save button {
    font-weight: bold;
    color: #fff;
}

.x-panel-body,
.x-panel-body-default, 
.x-panel-body-default.x-box-layout-ct {
    border-width: 0 !important;
}

.buttons {
    background-color: #eee;
    border: 1px solid #999;    
}

.buttons .x-panel-body {
    background-color: transparent;    
}

JavaScript

/*global Ext */
(function() {   
    var body = Ext.getBody(),
        toolbar;
    
    Ext.define('My.awesome.Class', {
        extend: 'Ext.toolbar.Toolbar',
             
        items: [{
            text: 'Delete',
            cls: 'button-delete'
        },
        {
            xtype: 'tbfill'
        },
        {
            text: 'Save',
            cls: 'button-save'
        },
        {
            xtype: 'tbtext',
            text: 'or'
        },
        {
            text: 'Cancel',
            cls: 'button-cancel'
        }] 
    });
    
    toolbar = Ext.create('My.awesome.Class', {
        renderTo: body,
        width: 500
    });
}());