JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<p id="p4"></p>
<p id="p5"></p>
<p id="p6"></p>

  
    <!-- SuperModel -->
        <script type="text/javascript">
            (function(a){var b=this,c=b.Supermodel={};c.VERSION="0.0.4";var d=a.Collection,e=a.Model.extend,f=function(a,b){this.required(b,"name"),_.extend(this,_.pick(b,"name","where","source","store")),_.defaults(this,{source:this.name,store:"_"+this.name});var c=a;do{if(!c.associations()[this.name])continue;throw new Error("Association already exists: "+this.name)}while(c=c.parent);a.associations()[this.name]=this,this.initialize&&a.all().on("initialize",this.initialize,this),this.change&&a.all().on("change",this.change,this),this.parse&&a.all().on("parse",this.parse,this),this.destroy&&a.all().on("destroy",this.destroy,this),this.create&&a.all().on("add",this.create,this)};f.extend=e,_.extend(f.prototype,{associate:function(a,b){if(!this.inverse)return;a.trigger("associate:"+this.inverse,a,b)},dissociate:function(a,b){if(!this.inverse)return;a.trigger("dissociate:"+this.inverse,a,b)},required:function(a){var b;for(var c=1;c<arguments.length;c++){if(a[b=arguments[c]])continue;throw new Error("Option required: "+b)}},andThis:function(a){var b=this;return function(){return a.apply(b,[this].concat(_.toArray(arguments)))}}});var g=f.extend({constructor:function(a,b){this.required(b,"inverse","model"),f.apply(this,arguments),_.extend(this,_.pick(b,"inverse","model")),_.defaults(this,{id:this.name+"_id"}),a.all().on("associate:"+this.name,this.replace,this).on("dissociate:"+this.name,this.remove,this)},create:function(a){a[this.name]=_.bind(this.access,this,a)},access:function(a,b){if(arguments.length<2)return a[this.store];this.replace(a,b)},initialize:function(a){this.parse(a,a.attributes);var...

JavaScript

var postsObject = [{
        "_id": "50f5f5d4014e045f000002",
        "author": {
            "_id": 49738439873,
            "name": "Chris Crawford",
            "photo": "http://example.com/photo.jpg"
        },
        "status": "This is a sample message.",
        "comments": [
            {
                "_id": "5160eacbe4b020ec56a46844",
                "text": "This is the content of the comment.",
                "author": {
                    "_id": 19738123870,
                    "name": "Bob Hope",
                    "photo": "http://example.com/photo.jpg"
                }
            },
            {
                "_id": "5160eacbe4b020ec56a46845",
                "text": "This is the content of the comment.",
                "author": {
                    "_id": 59738120274,
                    "name": "Brown Robert",
                    "photo": "http://example.com/photo.jpg"
                }
            }
        ]
    },
    {
        "_id": "50f5f5d4014e045f000003",
        "author": {
            "_id": 59738120274,
            "name": "Brown Robert",
            "photo": "http://example.com/photo.jpg"
        },
        "status": "This is another sample message.",
        "comments": [
            {
                "_id": "5160eacbe4b020ec56a46846",
                "text": "This is the content of the comment.",
                "author": {
                    "_id": 49738439873,
                    "name": "Chris Crawford",
                    "photo": "http://example.com/photo.jpg"
                }
            },
            {
                "_id": "5160eacbe4b020ec56a46847",
                "text": "This is the content of the comment.",
                "author": {
                    "_id": 19738123870,
                    "name": "Bob Hope",
                    "photo": "http://example.com/photo.jpg"
                }
            }
        ]
    }
];


// Comment Model
var Comment = Supermodel.Model.extend({
    idAttribute:...