JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-3.4.0/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/ext-3.4.0/adapter/ext/ext-base.js"></script>
<script src="http://dev.sencha.com/deploy/ext-3.4.0/ext-all.js"></script>
<p class="output">Clicked: <span id="output1">...</span></p>
<p class="output">Listened: <span id="output2">...</span></p>
<div id="menu1"></div>

CSS

body{
    font-family:arial,sans-serif;
}

p.output{
    padding: 5px;
    margin: 0px 0px 5px;
}

/* You can have all the fancy stuff here */
.item{
    display: block;
    padding: 5px;
    margin: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
}

.item:hover{
    background:#eee;
}

JavaScript

//Create a simple namespace. Habit :)
Ext.ns('NS');

/**
 * This is the customized menu component
 * Usage: bla bla..
 */
NS.Menu1 = Ext.extend(Ext.Component, {
    
    /**
     * @cfg menu
     * An array of menu items to be rendered into the component
     */
    menu: [],
    
    initComponent: function() {
        NS.Menu1.superclass.initComponent.call(this);
        
        //We create our own customized event, so users can hook events onto it
        this.addEvents({
             
            /**
             * @event menuclick
             * Fires when the menu is clicked
             * @param {NS.Menu1} cp this component
             * @param {Menu} m The menu item
             * @param {Ext.Element} a The anchor element
             * ... or whatever you want to pass
             */
             menuclick: true
         });
        
        //We hook an afterrender event here, so we could know
        //when will be our el be rendered.
        this.on('afterrender', this.onAfterRender, this);
    },
    
    onAfterRender: function() {
        
        var me = this;
        
        //Let's do all the fancy stuff here:
        Ext.each(me.menu, function(m) {
            
            //el property is always there as long as you subclass
            //Ext.Component. It's the outermost div of the component.
            //We create multiple single anchors here (of course ul/li/a is better)
            var a = me.el.createChild({
                tag: 'a', //so we can have :hover supports from crappy IE
                html: m.text, //or anything you like
                cls: 'item' //and the class to style it
                
            //then we hook 'click' even to this anchor
            }).on('click', function() {
                
                //Then do whatever you like here
                Ext.get('output1').update(m.text);
                
                //Or even firing your own customized events, whatever you like
               ...