JSFiddle - React, Tailwind, and code Playground

by lynnaloo

CSS

.panels-sample-panels {
	min-height: 100%;
	min-width: 380px;
}

.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;
	}
}

JavaScript

enyo.kind({
	name: "MyGridArranger",
	kind: "GridArranger",
	colHeight: "150",
	colWidth: "380"
});

enyo.kind({
	name: "PanelsSample",
	kind: "FittableRows",
	classes: "enyo-fit",
	components: [
        {kind: "Panels", 
         draggable: false, 
         animate: false, 
         arrangerKind: "MyGridArranger",
         wrap: true, 
         fit:true, 
         classes: "panels-sample-panels enyo-border-box",          
         components: [
			{content:1, style:"background:orange;"},
			{content:2, style:"background:yellow;"}
         ]}
	]
});

var app = new PanelsSample();
app.renderInto(document.body);