JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<div id="root" data-template="group-template" data-bind="source: groups" style="padding: 5px;"></div>

<script id="group-template" type="text/x-kendo-template">
    <div style="border: 3px solid blue; padding: 3px; margin: 3px;" data-template="section-template" data-bind="source: sections"></div>
</script>
        
<script id="section-template" type="text/x-kendo-template">
    <div style="border: 3px solid green; padding: 3px; margin: 3px;">
        <div data-template="row-template" data-bind="source: rows"></div>
        <button data-bind="click: removeSection">Remove <span data-bind="text: text" /></button>
    </div>    
</script>

<script id="row-template" type="text/x-kendo-template">
    # if (text== "hello") { #
        <div data-template="hello-row-template" data-bind="source: this"></div>    
    # } else if (text == "world") { #
        <div data-template="world-row-template" data-bind="source: this"></div>
    # } #    
</script>
        
<script id="hello-row-template" type="text/x-kendo-template">
    <div style="border: 3px solid red; padding: 3px; margin: 3px;">
        <span data-bind="text: text" />
        <button data-bind="click: removeRow">Remove <span data-bind="text: text" /> row</button>
    </div>
</script>

<script id="world-row-template" type="text/x-kendo-template">
    <div style="border: 3px solid red; background-color: yellow; padding: 3px; margin: 3px;">
        <span data-bind="text: text" />
        <button data-bind="click: removeRow">Remove <span data-bind="text: text" /> row</button>
    </div>
</script>

JavaScript

(function() {
  var Group, Row, Section, group, row, row2, section, section2,

  Group = (function() {

    Group.name = 'Group';
    function Group() {
        this.sections = new Array();
    }
    Group.prototype.sections = [];
    return Group;

  })();

  Section = (function() {

    Section.name = 'Section';
    function Section() {
        this.rows = new Array();
    }
    Section.prototype.rows = [];
    Section.prototype.text = "";
    return Section;

  })();

  Row = (function() {

    Row.name = 'Row';
    function Row() {}
    Row.prototype.text = "";
    return Row;
      
  })();

  window.viewModel = new kendo.observable({
    groups: [],
    removeRow: function(e) {
      var row, rows;
      alert("removeRow");
    },
    removeSection: function(e) {
      var section, sections;
      alert("removeSection");
    }
  });

  group = new Group();

  row = new Row();
  row.text = "hello";
  section = new Section();
  section.text = "Section 1";
  section.rows.push(row);
  group.sections.push(section);

  row2 = new Row();
  row2.text = "world";
  section2 = new Section();
  section2.text = "Section 2";
  section2.rows.push(row2);
  group.sections.push(section2);

  viewModel.groups.push(group);

}).call(this);

$(function () {
        kendo.bind("#root", viewModel);
});