JSFiddle - React, Tailwind, and code Playground

JavaScript

enyo.kind({
    name:"ex.Parent",
    kind:"Control",
    style:"border:1px solid black;margin:5px;",
    components:[
        {content:"Parent Content.  Children below vv"},
        {name:"client", style:"margin-left:20px", content:"hello everyone"},
        {content:"children above ^^"}
    ],
    controlParentName:"client" // this is the default value.
});

enyo.kind({
    name:"ex.Child",
    kind:"ex.Parent",
    components:[
        {content:"Child controls declared in the kind's components[] overwrite their parent's controls!"}
    ]
});

enyo.kind({
    name:"ex.WellBehavedChild",
    kind:"ex.Parent",
    create:function() {
        this.inherited(arguments);
        this.createComponent({kind:"Control", content:"I'll be inserted as a child of 'client'."});
    }
});

enyo.kind({
    name:"ex.App",
    kind:"Control",
    components:[
        {kind:"ex.Parent", components:[
            {content:"Components declared in the instance's components[] block are inserted or appended"}
        ]},
        {kind:"ex.Child", components:[
            {content:"I'm appended because this.$[this.controlParentName] doesn't exist"}
        ]},
        {kind:"ex.WellBehavedChild"}
    ]
});

new ex.App().renderInto(document.body);

console.log(ex.Parent.prototype.kindComponents);