JSFiddle - React, Tailwind, and code Playground

by enyojs

HTML

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>

<body>
    <script>
        new enyo.sample.ListContactsSample().renderInto(document.body);
    </script>
</body>

CSS

.list-sample-contacts {
    color: white;
}
.list-sample-contacts-list {
    background: url(assets/bg.png);
}
/* item */
.list-sample-contacts-item {
    height: 100px;
    border-top: 1px solid silver;
    padding: 12px 16px;
    background-color: #333333;
}
.list-sample-contacts-item-selected {
    background: #226B9A url(assets/item-hilite.png) repeat-x bottom;
}
.list-sample-contacts-item > * {
    display: inline-block;
    vertical-align: middle;
}
.list-sample-contacts-avatar {
    width: 32px;
    height: 32px;
    padding-right: 10px;
}
.list-sample-contacts-description {
    font-size: 12px;
    color: silver;
}
.list-sample-contacts-remove-button {
    float: right;
    display: none;
}
/* divider */
.list-sample-contacts-divider {
    background-color: #666;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 14px;
}
/* popup */
.list-sample-contacts-popup {
    width: 280px;
}
.list-sample-contacts-popup > * {
    display: block;
    margin: 10px 10px;
}
.list-sample-contacts-populate-button {
    float: right;
    margin-top: 25px;
}
.list-sample-contacts-label {
    display: inline-block;
    width: 120px;
    padding-right: 10px;
}

JavaScript

enyo.kind({
    name: "enyo.sample.ListContactsSample",
    kind: "FittableRows",
    classes: "list-sample-contacts enyo-fit",
    components: [
        {kind: "onyx.MoreToolbar", layoutKind: "FittableColumnsLayout", style: "height: 55px;", components: [
            {kind: "onyx.Button", content: "setup", ontap: "showSetupPopup"},
            {kind: "onyx.InputDecorator", components: [
                {name: "newContactInput", kind: "onyx.Input", value: "Frankie Fu"}
            ]},
            {kind: "onyx.Button", content: "new contact", ontap: "addItem"},
            {fit: true},
            {kind: "onyx.InputDecorator", components: [
                {kind: "onyx.Input", placeholder: "Search...", style: "width: 140px;", oninput: "searchInputChange"},
                {kind: "Image", src: "http://nightly.enyojs.com/latest/sampler/assets/search-input-search.png", style: "width: 20px;"}
            ]},
            {kind: "onyx.Button", content: "remove selected", ontap: "removeSelected"}
        ]},
        {kind:"Scroller", fit: true, components: [
            {kind: "Repeater", name:"list", classes: "list-sample-contacts-list",  multiSelect: true, onSetupItem: "setupItem", components: [
                {name: "divider", classes: "list-sample-contacts-divider"},
                {name: "item", kind: "ContactItem", classes: "list-sample-contacts-item enyo-border-box", onRemove: "removeTap"}
            ]}
        ]},
        {name: "popup", kind: "onyx.Popup", modal: true, centered: true, classes: "list-sample-contacts-popup", components: [
            {components: [
                {style:"display:inline-block", components:[
                    {content: "count:", classes: "list-sample-contacts-label"},
                    {name:"countOutput", style:"display:inline-block;", content: "1000"}
                ]},
                {kind: "onyx.Slider", value: 4, onChanging:"countSliderChanging"}
            ]},
            {components: [
                {content:...