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 button {
    margin-left: 4px;
    margin-right: 4px;
    font-size: 16px;
}

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

.x-btn button: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 button {
    padding: 1px 3px;
    font-weight: bold;
    color: #fff;
    background-color: #00f;
    border: 1px solid #00c;  
    border-radius: 4px;    
}

.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() {
    Ext.create('Ext.panel.Panel', {
        width: 500,
        cls: 'buttons',
        renderTo: Ext.getBody(),
        buttons: [{
            text: 'Delete',
            cls: 'button-delete'
        }, {
            text: 'Save',
            cls: 'button-save'
        }, {
            text: 'Cancel',
            cls: 'button-cancel'            
        }]
    });
}());