JSFiddle - React, Tailwind, and code Playground

by chantastic

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.2.js"></script>
<script src="http://builds.emberjs.com/tags/v1.2.0/ember.min.js"></script>
<script type="text/x-handlebars">

		<header></header>

		<div class="container">{{outlet}}</div>

		<footer></footer>
</script>

	<script type="text/x-handlebars" id="index">
		<h3>By Ember each</h3>
		
		<h4>Each</h4>
		{{#view App.GridView}}
				{{#each}}
						<img src="{{unbound src}}"/>
				{{/each}}
		{{/view}}
		
		<h4>Static</h4>
		{{#view App.GridView2}}
				<img src="http://placehold.it/350x150/69D2E7/ffffff"/>
				<img src="http://placehold.it/320x180/A7DBD8/ffffff"/>
				<img src="http://placehold.it/320x300/E0E4CC/ffffff"/>
				<img src="http://placehold.it/472x500/F38630/ffffff"/>
				<img src="http://placehold.it/540x360/FA6900/ffffff"/>
				<img src="http://placehold.it/800x600/ECD078/ffffff"/>
				<img src="http://placehold.it/400x120/D95B43/ffffff"/>
				<img src="http://placehold.it/300x300/C02942/ffffff"/>
				<img src="http://placehold.it/320x500/542437/ffffff"/>
				<img src="http://placehold.it/450x300/53777A/ffffff"/>		
		{{/view}}
	</script>

CSS

/* Put your CSS here */
 html, body {
    margin: 20px;
}
.Collage {
	padding:10px;
}
.Collage img	{
	display:inline-block;
	vertical-align:bottom;
	/*opacity:0;*/
	/*This is where you set the border you want for the image*/
	border:6px solid #FFF;
}

JavaScript

App = Ember.Application.create();

App.Router.map(function () {
    // put your routes here
});

App.IndexRoute = Ember.Route.extend({
	model: function() {
		return Videos;
	}
});

App.GridView = Ember.View.extend({

	classNames: ['Collage'],

 didInsertElement: function(){
 	this._super();
		this.$().removeWhitespace().collagePlus();
	}
});

App.GridView2 = Ember.View.extend({

	classNames: ['Collage'],

 didInsertElement: function(){
		this.$().removeWhitespace().collagePlus();
	}
});





//!DATA

var Videos = [
	{
		id: 1,
		title: 'name',
		src: 'http://placehold.it/350x150/69D2E7/ffffff'
	},
	{
		id: 2,
		title: 'name',
		src: 'http://placehold.it/320x180/A7DBD8/ffffff'
	},
	{
		id: 3,
		title: 'name',
		src: 'http://placehold.it/320x300/E0E4CC/ffffff'
	},
	{
		id: 4,
		title: 'name',
		src: 'http://placehold.it/472x500/F38630/ffffff'
	},
	{
		id: 5,
		title: 'name',
		src: 'http://placehold.it/540x360/FA6900/ffffff'
	},
	{
		id: 6,
		title: 'name',
		src: 'http://placehold.it/800x600/ECD078/ffffff'
	},
	{
		id: 7,
		title: 'name',
		src: 'http://placehold.it/400x120/D95B43/ffffff'
	},
	{
		id: 8,
		title: 'name',
		src: 'http://placehold.it/300x300/C02942/ffffff'
	},
	{
		id: 9,
		title: 'name',
		src: 'http://placehold.it/320x500/542437/ffffff'
	},
	{
		id: 10,
		title: 'name',
		src: 'http://placehold.it/450x300/53777A/ffffff'
	},
];