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 Sample({fit:true}).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:"Sample",
    kind:"FittableRows",
    components: [
        {kind:"onyx.Toolbar", content:"Header"},
        {kind:"Scroller", strategyKind:"ScrollStrategy", fit:true, components: [
            {name:"content", allowHtml:true}
        ]},
        {kind:"onyx.Toolbar", content:"Header"}
    ],
    create: function() {
        this.inherited(arguments);
        str = "";
        for (var i=0; i<10000; i++) {
            str+='<div class="list-sample-contacts-item enyo-border-box" id="app_sampleContent_listContactsSample_item"><img draggable="false" class="list-sample-contacts-avatar" id="app_sampleContent_listContactsSample_item_avatar" src="http://enyojs.com/sampler/assets/avatars/dude5.png"><div id="app_sampleContent_listContactsSample_item_control"><div id="app_sampleContent_listContactsSample_item_name">Aduwd Odepcubna</div><div class="list-sample-contacts-description" id="app_sampleContent_listContactsSample_item_title">Central Accountability Director</div><div class="list-sample-contacts-description" id="app_sampleContent_listContactsSample_item_control2">(415) 711-1234</div></div><div style="background-image:url(assets/remove-icon.png);display:none;" class="onyx-icon onyx-icon-button list-sample-contacts-remove-button" id="app_sampleContent_listContactsSample_item_remove"></div></div>';
        }
        this.$.content.setContent(str);
    }
});