JSFiddle - React, Tailwind, and code Playground

by lynnaloo

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

JavaScript

// test widgets
enyo.kind({
    name: "Chart1",
    content: "Test Chart 1",
    style: "background-color: blue;"
});

enyo.kind({
    name: "Chart2",
    content: "Test Chart 2",
    style: "background-color: red;"
});

  enyo.kind({
    name: "MyGridArranger",
    kind: "GridArranger",
    // These values determine how big of an area is allocated
    // for this tile. If this is smaller than the size of the
    // item, then the next tile will overlap.
    //colHeight: "250",
    //colWidth: "300"
  });

enyo.kind({
    name: "GridPanels",
    kind: "Panels",
    arrangerKind: "MyGridArranger",
    fit: true,
    realtimeFit: true,
    wrap: true,
    draggable: false
});

enyo.kind({
    name: "Test",
    kind: "FittableRows",
    components: [{
        name: "testPanels",
        kind: "GridPanels",
        components: [
            {kind: "Chart1"},
            {kind: "Chart2"}
        ]
    }]
});

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