JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://docs.sencha.com/ext-js/4-1/extjs-build/ext-all.js"></script>
<link rel="stylesheet" href="http://docs.sencha.com/ext-js/4-1/extjs-build/resources/css/ext-all.css">

JavaScript

Ext.onReady(function() {
    
    var store = Ext.create('Ext.data.TreeStore', {
        root: {
            expanded: true,
            children: [
                { text: "detention", leaf: true },
                { text: "homework", expanded: true, children: [
                    { text: "book report", leaf: true },
                    { text: "alegrbra", leaf: true}
                ] },
                { text: "buy lottery tickets", leaf: true }
            ]
        }
    });
    
    Ext.create('Ext.tree.Panel', {
        collapsible: true,
        title: 'Simple Tree',
        width: 200,
        height: 150,
        store: store,
        rootVisible: false,
        renderTo: Ext.getBody(),
        listeners: {
            collapse: function() {
                alert('collapsed');
            },
            expand: function() {
                alert('expand')
            }
        }
    });

});