JSFiddle - React, Tailwind, and code Playground

by enyojs

CSS

.header {
    text-align:center;
}

.panels > * {
    -moz-box-shadow: -4px 0 4px rgba(0,0,0,0.3);
    -webkit-box-shadow: -4px 0 4px rgba(0,0,0,0.3);
    box-shadow: -4px 0 4px rgba(0,0,0,0.3);
    background: #EEE;
}

@media all and (max-width: 400px) {
    .panels > * {
        min-width: 100%;
        max-width: 100%;
    }
}

.groupbox-item {
    padding: 5px;
    min-height: 30px;
    line-height: 30px;
}
.groupbox-item:first-child {
    line-height: 20px;
    min-height:20px;
}
.groupbox-item > * {
    display: inline-block;
}
.groupbox-item > :last-child {
    float: right;
}
.groupbox-item > :first-child + div {
    float: right;
}
.groupbox-item > :only-child {
    display: block;
    float: none;
}

JavaScript

enyo.kind({
    name: "MySample",
    kind: "FittableRows",
    components: [
        {kind: "onyx.Toolbar", classes:"header", name:"toolbar", content: "Header"},
        {kind: "Panels", fit:true, narrowFit:false, classes:"panels", arrangerKind:"CollapsingArranger", components: [
            {kind:"Navigation", style:"width:320px;"},
            {kind:"Detail"}
        ]}
    ]
});
        
enyo.kind({
    name:"Navigation",
    kind:"FittableRows",
    components: [
        {fit:true, style: "padding:10px;", components: [
            {kind:"onyx.Groupbox", controlClasses:"groupbox-item",  components: [
                {kind:"onyx.GroupboxHeader", content:"Setting 1"},
                {components: [
                    {content:"foo"}, {kind:"onyx.Checkbox"}
                ]},
                {components: [
                    {content:"foo"}, {kind:"onyx.ToggleButton"}
                ]},
                {components: [
                    {content:"foo"}, {kind:"onyx.Checkbox"}
                ]},
                {components: [
                    {kind:"onyx.InputDecorator", components: [
                        {kind:"onyx.Input", placeholder:"foo"}
                    ]}
                ]}
            ]}
        ]},
        {kind:"onyx.Toolbar", content:"Footer"}
    ]
});

enyo.kind({
    name:"Detail",
    kind:"FittableRows",
    components: [
        {fit:true},
        {kind:"onyx.Toolbar", content:"Footer"}
    ]
});

new MySample({fit:true}).write();