JSFiddle - React, Tailwind, and code Playground

by bsorrentino

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/dev/resources/css/ext-all.css">

CSS

body {
    padding: 50px 20px 0 20px;
}

JavaScript

Ext.create('Ext.panel.Panel', {
    width: '100%',
    height: 400,
    title: 'Border Layout',
    layout: 'border',
    bodyBorder: false,
    defaults: {
        collapsible: true,
        split: true,
        bodyPadding: 15
    },
    items: [{
        title: 'Footer',
        region: 'south',
        height: 150,
        minHeight: 75,
        maxHeight: 250,
        html: 'Footer content'
    },{
        //title: 'Header',
        region:'north',
        floatable: false,
        margins: '5 0 0 0',
        minHeight: 75,
        maxHeight: 250,
        html: 'Secondary content like navigation links could go here'
    },{
        //title: 'Main Content',
        collapsible: false,
        region: 'center',
        margins: '5 0 0 0',
        html: 'Main Page This is where the main content would go'
    }],
    renderTo: Ext.getBody()
});