JSFiddle - React, Tailwind, and code Playground

by enyojs

HTML

<script>
    new App().renderInto(document.body);
</script>

CSS

.tools > * {
    margin: 3px;
}
.divider {
    color: #F49200;
    text-transform: uppercase;
    font-family: Segoe UI, Prelude Medium, Helvetica, Verdana, sans-serif;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
}
.bar > div > div > * {
    vertical-align: middle;
    margin: 0 6px;
}

JavaScript

enyo.kind({
    name: "App",
    classes:"onyx",
    kind:"Scroller",
    components: [
        {kind: "onyx.Toolbar", content: "Onyx Widget Sampler"},
        {style: "padding: 10px;", components: [
            {classes: "divider", content: "Header"},
            {kind: "onyx.MoreToolbar", components: [
                {kind: "onyx.Grabber"},
                {content: "Header"},
                {kind: "onyx.Button", content: "Button"},
                {kind: "onyx.Button", content: "Down", classes: "active"},
                {kind: "onyx.Button", content: "Button"},
                {kind: "onyx.InputDecorator", components: [
                    {kind: "onyx.Input", placeholder: "Input"}
                ]},
                {kind: "onyx.Button", content: "Right"},
                {kind: "onyx.InputDecorator", components: [
                    {kind: "onyx.Input", placeholder: "Right Input"}
                ]},
                {kind: "onyx.Button", content: "More Right"}
            ]},
            {tag: "br"},
            {classes: "divider", content: "RadioGroup"},
            {kind: "onyx.RadioGroup", components: [
                {content: "Alpha", active: true},
                {content: "Beta"},
                {content: "Gamma"}
            ]},
            {tag: "br"},
            {classes: "divider", content: "Popups"},
            {classes: "tools", defaultKind: "onyx.Button", components: [
                {kind: "onyx.Button", content: "Popup...", ontap: "showPopup", popup: "popup"},
                {kind: "onyx.Button", content: "Modal Popup...", ontap: "showPopup", popup: "modalPopup"}
            ]},
            {name: "popup", kind: "onyx.Popup", centered: true, floating: true, style: "padding: 10px; font-size: 30px;", content: "Popup..."},
            {name: "modalPopup", kind: "onyx.Popup", centered: true, modal: true, floating: true, style: "padding: 10px; font-size: 30px;", content: "Modal Popup..."},
            {tag: "br"},
            {classes:...