JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//content.web/stylesheets/xero.css">

JavaScript

(function () {
    Ext.define('My.LV', {
        extend: 'Ext.Component',
        mixins: ['Ext.form.Labelable'],
        labelAlign: 'top',
        labelStyle: 'font-weight: bold;',
        fieldLabel: 'Income',
        hideLabel: false,
        rawValue: 0.00,
        valueTpl: '{value:htmlEncode}',
        subTplInsertions: [],

        initComponent: function () {
            this.callParent();
            this.initLabelable();
            //this.initField
        },

        initRenderTpl: function () {
            if (!this.hasOwnProperty('renderTpl')) {
                this.renderTpl = this.getTpl('labelableRenderTpl');
            }

            return this.callParent();
        },

        initRenderData: function () {
            return Ext.applyIf(this.callParent(), this.getLabelableRenderData());
        },

        getSubTplData: function () {
            var data;

            debugger;

            data = Ext.apply({
                value: this.rawValue
            }, this.subTplData);

            this.getInsertionRenderData(data, this.subTplInsertions);

            return data;
        },

        getSubTplMarkup: function () {
            var subTplData = this.getSubTplData(),
                tpl = this.getTpl('valueTpl');
            
            return tpl.apply(subTplData);
        }

    });

    Ext.create('My.LV', {
        renderTo: Ext.getBody()
    });
}());