JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<link rel="stylesheet" href="//static.branch12.test.xero.com/content/1.7/xero.css">
<script src="//content.web/libs.js"></script>
<script src="//content.web/xero.js"></script>

SCSS

.my-field {
    border-bottom: 1px solid #555;
    width: 100%;
    
    input {
        margin-left: 200px;
    }
}

JavaScript

Ext.widget({
    xtype: 'panel',
    layout: 'form',
    renderTo: Ext.getBody(),
    fieldDefaults: {
        labelAlign: 'left',
        labelWidth: 200,
        labelPad: 5
    },
    items: [
        {
            fieldLabel: 'New Password',
            xtype: 'textfield',
            cls: 'my-field'
        }
    ]
});