JSFiddle - React, Tailwind, and code Playground

JavaScript

enyo.kind({
    name:"ListPanel",
    events:{
        onSelectContent:""
    },
    components:[
        {kind:"List", count:10, onSetupItem:"setupItem", components:[
            {name:"listItem", ontap:"listItemTapped"}
        ]}
    ],
    setupItem:function(source, event) {
        this.$.listItem.setContent("item " + event.index);
    },
    listItemTapped:function(source, event) {
        // assuming you'd be pulling from whatever model populated the list ...
        this.doSelectContent({index:event.index, content:"item " + event.index});
    }
});

enyo.kind({
    name:"ContentPanel",
    kind:"FittableRows",
    style:"background:white",
    published:{
        title:"",
        index:0
    },
    components:[
        {kind:"onyx.Toolbar", components:[
            {name:"title"}
        ]},
        {name:"content", fit:true}
    ],
    create:function() {
        this.inherited(arguments);
        this.titleChanged();
        this.indexChanged();
    },
    titleChanged:function() {
        this.$.title.setContent(this.title);
    },
    indexChanged:function() {
        this.$.content.setContent(this.index ? "You've selected content #"+ this.index : "");
    }
});

enyo.kind({
    name:"ex.App",
    kind:"Panels",
    arrangerKind:"CollapsingArranger",
    classes:"enyo-fit",
    components:[
        {name:"lp", kind:"ListPanel", onSelectContent:"contentSelected", style:"width:100px"},
        {name:"cp", kind:"ContentPanel", title:"Select an Item"}
    ],
    contentSelected:function(source, event) {
        this.$.cp.setTitle(event.content);
        this.$.cp.setIndex(event.index);
    }
});

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