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>
<script src="http://marionettejs.com/downloads/backbone.marionette.min.js"></script>
<div id="marionetteContainer" 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 displayMarionetteView = function() {
  //Define model/collection
  var Model = Backbone.Model.extend({
    id: undefined
  });
  var Collection = Backbone.Collection.extend({model: Model});

  //Build views
  var ChildView = Marionette.ItemView.extend({
      className: 'childView',
      template: _.template("id <%= id %>"),
      model: Model
  });


  var CollectionView = Marionette.CollectionView.extend({
    className: 'collectionView',
    childView: ChildView
  });

  // build collection for collection 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();
  // add to page
  $('#marionetteContainer').append(collectionViewInstance.$el);
};

displayMarionetteView();