JSFiddle - React, Tailwind, and code Playground

by kryo

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0-beta3/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/ext-4.0-beta3/bootstrap.js"></script>
<div id="container"></div>

CSS

.custom-body-class {
    padding: 10px;
}

JavaScript

(function (Ext) {

    // Example adapted from:
    // ext-4.0-beta3/examples/grid/groupgrid.js

    // 
    Ext.require(['Ext.data.*', 'Ext.grid.*']);

    // sample data
    var MockData = [{
        name: 'Cheesecake Factory',
        cuisine: 'American'
    }, {
        name: 'University Cafe',
        cuisine: 'American'
    }, {
        name: 'Slider Bar',
        cuisine: 'American'
    }, {
        name: 'Shokolaat',
        cuisine: 'American'
    }, {
        name: 'Gordon Biersch',
        cuisine: 'American'
    }, {
        name: 'Crepevine',
        cuisine: 'American'
    }, {
        name: 'Creamery',
        cuisine: 'American'
    }, {
        name: 'Old Pro',
        cuisine: 'American'
    }, {
        name: 'Nola\'s',
        cuisine: 'Cajun'
    }, {
        name: 'House of Bagels',
        cuisine: 'Bagels'
    }, {
        name: 'The Prolific Oven',
        cuisine: 'Sandwiches'
    }, {
        name: 'La Strada',
        cuisine: 'Italian'
    }, {
        name: 'Buca di Beppo',
        cuisine: 'Italian'
    }, {
        name: 'Pasta?',
        cuisine: 'Italian'
    }, {
        name: 'Madame Tam',
        cuisine: 'Asian'
    }, {
        name: 'Sprout Cafe',
        cuisine: 'Salad'
    }, {
        name: 'Pluto\'s',
        cuisine: 'Salad'
    }, {
        name: 'Junoon',
        cuisine: 'Indian'
    }, {
        name: 'Bistro Maxine',
        cuisine: 'French'
    }, {
        name: 'Three Seasons',
        cuisine: 'Vietnamese'
    }, {
        name: 'Sancho\'s Taquira',
        cuisine: 'Mexican'
    }, {
        name: 'Reposado',
        cuisine: 'Mexican'
    }, {
        name: 'Siam Royal',
        cuisine: 'Thai'
    }, {
        name: 'Krung Siam',
        cuisine: 'Thai'
    }, {
        name: 'Thaiphoon',
        cuisine: 'Thai'
    }, {
        name: 'Tamarine',
        cuisine: 'Vietnamese'
    }, {
        name: 'Joya',
        cuisine: 'Tapas'
    }, {
        name: 'Jing Jing',
        cuisine: 'Chinese'
    }, {
   ...