JSFiddle - React, Tailwind, and code Playground

by gorillawit

CSS

.panels-sample-panels {
	min-height: 320px;
	min-width: 320px;
}

.panels-sample-panels > * {
	border: 2px solid #333;
	font-size: 5em;
	text-align: center;
}

.panels-sample-wide > * {
	min-width: 50%;
}

.panels-sample-collapsible > * {
	min-width: 250px;
}

.panels-sample-spiral > * {
	min-width:150px;
	min-height:150px;
	max-height:150px;
	max-width:150px;
}

.panels-sample-grid > * {
	min-width:150px;
	min-height:150px;
	max-height:150px;
	max-width:150px;
}
.arranger-scroller {
}

@media screen and (max-width: 480px) {
	.arranger-scroller {
		max-height: 270px;
	}
}

CoffeeScript

enyo.kind
    name: "enyo.sample.MyGridArranger"
    kind: "GridArranger"
    colHeight: "150"
    colWidth: "150"
    
enyo.kind
    name: "Fitter"
    kind: "FittableRows"
    classes: "enyo-fit"
    components: [
        kind: "FittableColumns"
        noStretch: true
        classes: "onyx-toolbar onyx-toolbar-inline"
        components: [
            classes: "onyx-toolbar-inline"
            style: "white-space: nowrap;"
            components: [
                kind: "onyx.MenuDecorator", components: [
                    {content: "Arranger"}
                    name:"arrangerPicker"
                    kind: "onyx.Menu"
                    maxHeight: 360
                    floating: true
                    onSelect:"arrangerSelected"
                    ]
                {kind: "onyx.Button"
                content: "Previous"
                ontap: "prevPanel"}
                {kind: "onyx.Button"
                content: "Next"
                ontap: "nextPanel"}
                {kind: "onyx.InputDecorator"
                style: "width: 60px;"
                components: [
                    kind: "onyx.Input"
                    value: 0
                    onchange: "gotoPanel"
                ]}
                {kind: "onyx.Button"
                content: "Go"
                ontap: "gotoPanel"}
                {kind: "onyx.Button"
                content: "Add"
                ontap: "addPanel"}
                {kind: "onyx.Button"
                content: "Delete"
                ontap: "deletePanel"}
            ]
        ]
        {kind: "Panels"
        name:"samplePanels"
        fit:true, realtimeFit: true, classes: "panels-sample-panels enyo-border-box", components: [
            {content:0, style:"background:red;"}
            {content:1, style:"background:orange;"}
            {content:2, style:"background:yellow;"}
            {content:3, style:"background:green;"}
            {content:4, style:"background:blue;"}
           ...