JSFiddle - React, Tailwind, and code Playground

CSS

.todo-list {
    width:50%;
    background:#fff;
}

.todo-list .task-row {
    height:40px;
    background:#ccf;
    border-bottom:1px solid #eef;
}

.todo-list .task-row > * {
    display:inline-block;
    margin:3px;
}

.todo-details {
    width:50%;
    background:#fff;
}

.todo-details .delete-button {
    float:right;
    background-color: #C51616;
    color: #F2F2F2;
}

.todo-details .save-button {
    background-color: #91BA07;
    color: #F2F2F2;
}

.todo-details .onyx-groupbox {
    margin:6px;
}

JavaScript

enyo.kind({
    name:"ToDo.App",
    classes:"enyo-unselectable",
    components:[
        {kind:"Panels", arrangerKind:"CollapsingArranger", narrowFit:false, realtimeFit:true, classes:"enyo-fit", components:[
            {name:"list", kind:"ToDo.List", onAddItem:"addItem", onViewItem:"viewItem"},
            {name:"detail", kind:"ToDo.Detail", onSaveItem:"itemSaved", onDeleteItem:"itemDeleted"}
        ]},
        {name:"data", kind:"ToDo.Model"}
    ],
    create:function() {
        this.inherited(arguments);
        var items = this.$.data.getItems();
        this.$.list.setItems(items);
    },
    addItem:function(source, event) {
        var i = this.$.data.addItem("New Task");
        this.$.detail.setItem(i);
        this.$.list.refresh();
    },
    viewItem:function(source, event) {
        this.$.detail.setItem(event.item);
    },
    itemSaved:function(source, event) {
        this.$.list.refresh();
    },
    itemDeleted:function(source, event) {
        this.$.data.removeItem(event.item);
        this.$.list.refresh();
    }
});

enyo.kind({
    name:"ToDo.List",
    kind:"FittableRows",
    classes:"todo-list",
    published:{
        items:""
    },
    events:{
        onViewItem:"",
        onAddItem:""
    },
    components:[
        {name:"list", kind:"List", onSetupItem:"setupItem", fit:true, components:[
            {classes:"task-row", components:[
                {name:"cb", kind:"onyx.Checkbox"},
                {name:"taskName", ontap:"taskTapped"}
            ]}
        ]},
        {kind:"onyx.Toolbar", components:[
            {kind:"onyx.Button", content:"Add Task", ontap:"doAddItem"}
        ]}
    ],
    create:function() {
        this.inherited(arguments);
        this.itemsChanged();
    },
    itemsChanged:function() {
         if(this.items) {
             this.$.list.setCount(this.items.length)
         } else {
             this.$.list.setCount(0);
         }
    },
    setupItem:function(source, event) {
       ...