JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.1/resources/css/ext-all.css">

JavaScript

Ext.define('mycomponent', {
    extend: 'Ext.Component',
    cls: 'hopscotch-bubble-container',
    width: 280,
    padding: 15,
    id: 'test',    
    html: [
        '<span class="hopscotch-bubble-number">1</span>',
        '<div class="hopscotch-bubble-content"><h3 class="hopscotch-title">Step 1</h3>',
        '<div class="hopscotch-content">Step 1 Instructions here.</div>',
        '</div>',
        '<div class="hopscotch-actions">',
        '<button id="hopscotch-prev" class="hopscotch-nav-button prev hide">Back</button>',
        '<a class="hopscotch-bubble-close" href="#" title="Close">Close</a>'
    ]
});

Ext.onReady(function () {
    Ext.create('Ext.Container', {
        layout: {
            type: 'vbox',
            align: 'strech'
        },

        items: [{
            xtype: 'image',
            src: 'https://cdn1.iconfinder.com/data/icons/MetroStation-PNG/128/MB__help.png',
            height: 128,
            width: 128,
            listeners: {
                render: function (c) {
                    c.getEl().on('click', function (e) {
                        
                        // create new component
                        var comp = Ext.create('mycomponent');
                        
                        // add to container
                        c.up('container').add(comp);
                    }, c);
                }
            }
        }],

        renderTo: Ext.getBody()
    });
});