JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<div id="backboneContainer" class="container"></div>

CSS

.childView {
  border: 2px red solid !important;
  margin: 5px !important;
}

.collectionView {
  border: 2px yellow solid !important;
  margin: 5px;
}

.collectionView::before {
  content: 'collection view:'
}

.childView::before {
  content: 'child view: ';
}

JavaScript

var displayBackboneView = function() {
  //Define model/collection
  var Model = Backbone.Model.extend({
    id: undefined
  });
  var Collection = Backbone.Collection.extend({model: Model});

  //Build views
  var ChildView = Backbone.View.extend({
    className: 'childView',
    template: _.template("id <%= id %>"),
    render: function() {
      return this.$el.html(this.template(this.model.attributes));
    }
  });

  var CollectionView = Backbone.View.extend({
    className: 'collectionView',
    initialize: function() {this.views= [];},
    render: function() {
      if (this.collection) {
        var self = this,
            view;
        this.collection.each(function(model) {
          view = new ChildView({model: model});
          self.$el.append(view.render());
          self.views.push(view);
        });
      }
    }
  });

  var exampleCollection = new Collection();

  for (var i = 0; i < 5; i++) {
    exampleCollection.add(new Model({id: i}));
  }

  // create view object
  var collectionViewInstance = new CollectionView({collection: exampleCollection});

  // render view and add to page
  collectionViewInstance.render();
  $('#backboneContainer').append(collectionViewInstance.$el);
};

displayBackboneView();