JSFiddle - React, Tailwind, and code Playground

HTML

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

<script id="template"  type="text/ractive">
    <ul>
    {{#cages}}{{# {cage: .} }}
      <li>{{name}} gives room to these animals:
      {{#animals}}
        • {{name}} (in {{cage.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"}]},
    ]
  }
});