JSFiddle - React, Tailwind, and code Playground

by Cardiff

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.8.0/backbone.marionette.min.js"></script>
<div id="content" class="content"></div>

<script type="text/template" id="flower-template">
   <div> <%= name %> </div>
        <div id="flower">
            <ul></ul>
        </div>
</script>
    <script type="text/template" id="garden-template">
        <div> <%= name %> </div>
        <div id="garden">
            <ul></ul>
        </div>
    </script>
        
<script type="text/template" id="bird-template">
       <%= name %>
</script>

JavaScript

var data = [
        {
          "id": "1",
          "name": "Rose",
          "fruits": [
            {
              "id": "100",
              "name": "Banana",
               "birds":[
                   {"name":"parrot1"},
                   {"name":"parrot2"}
               ]
            },
            {
              "id": "101",
              "name": "Gova",
                 "birds":[
                     {"name":"eagle1"},
                     {"name":"eagle2"}
                 ]
            }
          ]
        },
        {
          "id": "2",
          "name": "Lilly",
          "fruits": [
            {
              "id": "200",
              "name": "Mango",
               "birds":[
                      {"name":"dove1"},
                      {"name":"dove2"}
                 ]
            },
            {
              "id": "201",
              "name": "PineApple",
               "birds":[
                      {"name":"Bat1"},
                      {"name":"Bat2"}
                 ]
            }
          ]
        },
        {
          "id": "3",
          "name": "Lotus",
          "fruits": [
            {
              "id": "300",
              "name": "Apple",
              "birds":[
                      {"name":"cooko1"},
                      {"name":"cooko2"}
                 ]
            },
            {
              "id": "301",
              "name": "Charry",
               "birds":[
                      {"name":"crow1"},
                      {"name":"crow2"}
                 ]
            }
          ]
        }
]

var gardenApp = new Backbone.Marionette.Application();

gardenApp.addRegions({
    mainRegion:'#content'
});

gardenApp.birdModel = Backbone.Model.extend({});
gardenApp.birdCollection = Backbone.Collection.extend({
	model:gardenApp.birdModel,
    initialize:function(){
        //console.log('flower collection initialized');
    }
});

gardenApp.flowerModel = Backbone.Model.extend({});
gardenApp.flowerCollection...