JSFiddle - React, Tailwind, and code Playground

by samccone

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.8.6/backbone.marionette.js"></script>
<foil></foil>

CSS

foil, bagel, bacon, tomato, hummus, sprouts, avocado {
    display: block;
}

foil {
    width: 200px;
    padding: 5px;
    background: silver;
    border-radius: 45px;
}

bagel {
    padding: 40px 0;
    background: orange;
    border-radius: 40px;
}

bacon {
    height: 10px;
    background: brown;
}

tomato {
    height: 15px;
    background: red;
}

hummus {
    height: 5px;
    background: tan;
}

sprouts {
    height: 10px;
    background: green;
}

avocado {
    height: 5px;
    background: lightgreen;
}

JavaScript

var foil = new Marionette.Region({
    el: 'foil'
});

var BagelItem = Marionette.View.extend({
    tagName: function() {
      return this.model.get("name");
    }
})

var Bagel = Marionette.CollectionView.extend({
    tagName: 'bagel',
    itemView: BagelItem
});

var ingredients = new Backbone.Collection([  
    {name: "bacon"},
    {name: "tomato"},
    {name: "hummus"},
    {name: "sprouts"},
    {name: "avocado"}
]);

foil.show(new Bagel({collection: ingredients}));