JSFiddle - React, Tailwind, and code Playground

by marionettejs

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.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.2/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.radio/2.0.0-pre.2/backbone.radio.js"></script>
<script src="https://rawgit.com/marionettejs/backbone.marionette/next/lib/backbone.marionette.js"></script>
<section id="example">
  <article id="article-region"></article>
</section>

CSS

.table {
  border: 1px green;
  border-style: solid;
}
 .table.table-striped{
   border-style: dashed;
 }

JavaScript

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

const MyModel = Backbone.Model.extend({});

const MyView = View.extend({
  template: _.template('<div>example</div>'),
  className() {
    const defaultClass = this.getOption('defaultClass');
    const extraClasses = this.getOption('extraClasses');
    return [defaultClass, extraClasses].join(' ');
  },
  defaultClass: 'table'
});

const myView = new MyView({
  model: new MyModel(),
  extraClasses: 'table-striped'
});

const exampleView = new View({
  el: '#example',
  regions: {
    'article-region': '#article-region'
  }
});

exampleView.showChildView('article-region', myView);