JSFiddle - React, Tailwind, and code Playground

by oroce

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<script type="text/tmpl" id="item-template">
     <div class="item red <%= classname %>" data-id="<%= item.id %>">this is <%=item.id%></div>
</script>
<div id="filter-container"></div>
<div id="container">
    
</div>

CSS

#container {
  border: 1px solid;
  padding: 3px;
}

.item {
  width: 120px;
  height: 120px;
  margin: 3px;
  float: left;
}

.item.next {
  width: 60px;
  height: 60px;
  border: 5px solid black;
  border-radius: 35px;
}

.red { background: red; }
.blue { background: blue; }
.green { background: green; }
.yellow { background: yellow; }

.item.selected{
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;

    width:220px;
    height: 220px;
}
.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}
.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */

JavaScript

var items = Array(100).join(0).split(0).map(function(v,i){ return { id: i }; })
var classNames = "red0blue0yellow0green".split(0);
var ItemModel = Backbone.Model.extend({
    defaults:{
        poster: "http://video-js.zencoder.com/oceans-clip.jpg",
        url: "http://video-js.zencoder.com/oceans-clip.mp4"
    }
});


var ItemsCollection = Backbone.Collection.extend({
    model: ItemModel
});

var ItemRouter = Backbone.Router.extend({
    initialize: function(){
        this.itemsCollection = new ItemsCollection( items );
        this.itemsView = new ItemsView({
            collection: this.itemsCollection
        }).render();
    },
    routes: {
        "item/:itemid": "showItem",
        "page/:pageNum": "showPage",
        "tags/:tagNames": "filterTags",
        "": "default"
    },
    showItem: function(){
        
    },
    showPage: function(){
    
    },
    filterTags: function(){
    
    },
    "default": function(){

    }
});

var ItemsView = Backbone.View.extend({
    events: {
        "click .item": "showItem"
    },
    showItem: function( e ){
        var el = $( e.currentTarget )
        if( el.hasClass( "selected" ) ){
            // we should move back to previous url silently
            el.removeClass( "selected" )
        }
        else{
            var id = el.data( "id" );
            el.addClass( "selected" );
            Backbone.history.navigate( "/item/" + id, true );
        }
        this.$el.isotope( "reLayout" );
        
    },
    render: function(){
        this.$el.empty();
        this.collection.each(function( model ){
            this.$el.append(
                this.template({
                    item: model.toJSON(),
                    classname: classNames[ model.id % 4 ]
               })
            );
        }, this );
        this.$el.isotope({
            itemSelector: ".item",
            masonry: {
                columnWidth: this.$el.width() / 5
            }
        });
        return this;
    },
   ...