JSFiddle - React, Tailwind, and code Playground

by marionettejs

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.radio/2.0.0/backbone.radio.min.js"></script>
<script src="https://rawgit.com/marionettejs/backbone.marionette/next/lib/backbone.marionette.js"></script>
<div id="view">
  <div id="first-region" style="height:150px; overflow-y:scroll">
  </div>
</div>

JavaScript

const { View, Application } = Marionette; // import { View, Application } from 'backbone.marionette';

const myApp = new Application({ region: 'body' });

const MyView = View.extend({
  el: '#view',
  ui: {
    region: '#first-region'
  },
  regions: {
    firstRegion: '@ui.region'
  }
});

myApp.showView(new MyView());

myApp.getView().showChildView('firstRegion', new View({ template: _.template('Hello World!')}));