JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<script src="https://static.xero.com/content/2.6/libs.js"></script>
<script src="https://static.xero.com/content/2.6/xero.js"></script>
<link rel="stylesheet" href="https://static.xero.com/content/2.6/xero.css">
<div id="main" class="x-content"></div>

SCSS

body {
    min-height: 800px;
}

.x-toolbar-spacer {
    width: 4px;
}

.x-toolbar-docked-bottom {
    background-color: #fff;
    border: 1px solid #ccc;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    
    &,
    .x-box-item.x-btn {
        padding-left: 6px;
        padding-right: 6px;
    }
}

JavaScript

Ext.widget({
    xtype: 'panel',
    renderTo: 'main',
    floating: true,
    width: 400,
    items: [{
        html: '<img src="http://33.media.tumblr.com/8d43b7589dd5ae602331d958fcc76d82/tumblr_mpn2y3d7qE1qdyeoco1_500.gif">',
        height: 'auto'
    }],
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        items: [{
            xtype: 'tbtext',
            text: '1',
            itemId: 'count'
        }, ' ', 'selected', '->', {
            xtype: 'button',
            cls: 'blue',
            text: 'Update'
        }]
    }]
});