JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rivets/0.8.1/rivets.bundled.min.js"></script>
<ol id="page">

</ol>


<div id="item_template">
    <li>
        <h4 rv-text="item.title"></h4>
        <p rv-html="item.description"></p>
        <button rv-on-click="item.someHandler">Click Me!</button>
        <ol>
            <my-new-item rv-each-item="item.items" item="item"></my-new-item>
        </ol>
    </li>
</div>

CSS

#item_template { display: none; }

JavaScript

var item = {
    id: 1,
    title: "test item 1",
    description: "my description 1",
    someHandler: function () {
        console.log("handle something for Item 1");
    },
    items: [
        {
            id: 2,
            parentItem: 1,
            title: "test item 2",
            description: "my description 2",
            someHandler: function () {
                console.log("handle something for Item 2");
            },
            items: [

            ]
        },
        {
            id: 3,
            parentItem: 1,
            title: "test item 3",
            description: "my description 3",
            someHandler: function () {
                console.log("handle something for Item 3");
            },
            items: [
                {
                    id: 4,
                    parentItem: 3,
                    title: "test item 4",
                    description: "my description 4",
                    someHandler: function () {
                        console.log("handle something for Item 4");
                    },
                    items: [

                    ]
                }
            ]
        }
    ]
};

rivets.components['my-new-item'] = {
  // Return the template for the component.
  template: function() {
    return document.querySelector('#item_template').innerHTML;
  },

  // Takes the original element and the data that was passed into the
  // component (either from rivets.init or the attributes on the component
  // element in the template).
  initialize: function(el, data) {
    return data;
  }
}

rivets.init('my-new-item', document.querySelector('#page'), { item: item });