JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content"></div>

<script id="template"  type="text/ractive">
    <ul>
    {{#cages}} {{# { cage: . } }}
      <li>{{cage.name}} gives room to these animals:
      {{#animals}} {{# {animal: .} }}
        • {{animal.name}}
      {{/}}{{/animals}}</li>
    {{/}}{{/cages}}
    </ul>
</script>

JavaScript

ractive = new Ractive({
  el: 'content',
  template: '#template',
  data: {
    cages: [
        {name: "Cage 1", animals:[{name:"Marsupilami"}]},
        {name: "Cage 2", animals:[{name:"Ants"}, {name:"Cougar"}]},
    ]
  }
});