JSFiddle - React, Tailwind, and code Playground

by FiNGAHOLiC

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.1.7/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<div id="twitterContent">
</div>


<!-- Templates -->
<script id="tweetTemplate" type="text/x-jquery-tmpl">
    <div class="item">    
        <div class="update">
        <div class="photo">
            <img src="${profile_image_url}" alt="${from_user}"/>                             </div>
        <div class="message">
            ${text}                
        </div>
     </div>
     <div class="source">
        <label>${from_user} (${created_at})</label>
     </div>
   </div>
</script>

CSS

#twitterContent               {color: white; background-color: #333333;}
#twitterContent    .item                {height: 100%; border: 0.5px black solid;}
#twitterContent   .item .update         {height: 55px; }
#twitterContent    .item .update .photo {height: 100%; float: left;}
#twitterContent    .item .update .message {height: 100%; padding: 2px 0;}
#twitterContent    .item .source         {height: 17px; font-size:8pt; padding: 2px 2px 2px 2px; color: #999999}

JavaScript

//jQuery Plugin to show tweets
(function($, undefined){
    $.widget("ijm.twitTweet", {
        options: {
            results: 5,
            twitterUrl: "http://search.twitter.com/search.json",
            userName: "*",
            template: "#tweetTemplate"
        },
        
        _create: function(){
            var TweetView = this._initView();
            var TweetCollection = this._initCollection();
            var tweets = new TweetCollection();
            var element = this.element;
            
            var AppView = Backbone.View.extend({
                initialize: function(){
                    this.model.bind("all", this.addAll, this);    
                    this.model.fetch();    
                },
                
                addAll: function(){
                    var el = this.el;
                    el.hide().empty();
                    this.model.each(function(tweet){
                        var view = new TweetView({model: tweet});
                        el.append(view.render().el);
                    });
                    el.slideDown(500);
                }    
            });
            
            var appView = new AppView({model: tweets, el: element});
        },
        
        _initView: function(){
            return Backbone.View.extend({
                template: $(this.options.template),
                initialize: function() {
                    this.model.bind('change', this.render, this);
                    this.render();
            },
                render: function(){
                    var tweet = this.template.tmpl(this.model.toJSON());
                    $(this.el).html(tweet);
                    return this;
                }
            });
        },
        
        _initCollection: function(){
            var twitterUrl = this._getUrl();
        
            var Tweet = Backbone.Model.extend({});
            
            return Backbone.Collection.extend({
                model: Tweet,
  ...