JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<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.blueopal.min.css">
<div id="tabs" />

JavaScript

var tables = [];
var tabs = [];

for (var i = 1; i <= 5; i++) {
  var data = [];
  for (var j = 1; j <= 20; j++) {
    data.push({ Id: "100" + j, ShortDescr: "Table " + i + " ShortDescr" + j, Descr: "Table " + i + " Descr" + j });
  }
  tables.push({ TableName: "Table " + i, TableData: data });
}

var tabStrip = $('#tabs').kendoTabStrip({
  dataTextField: 'text',
  dataContentField: 'content',
  dataSource: tabs,
  animation: { open: { duration: 1 } },
  activate: function (e) {
    var tableName = e.item.innerText;
    var tableData = [];
    var grid = $('<div />');

    $.each(tables, function(tableIndex, table) {
      if (tableName == table.TableName) {
        tableData = table.TableData;
        return false;
      }
    });

    grid.kendoGrid({
      dataSource: {
        pageSize: 15,
        data: tableData
      },
      pageable: { input: true, numeric: false },
      sortable: true,
      resizable: true
    });
      
    $(e.contentElement).append(grid);
  }
}).data('kendoTabStrip');

$.each(tables, function (tableIndex, table) {
  tabs.push({ text: table.TableName, content: '<div />' });
});

tabStrip.dataSource.data(tabs);
tabStrip.select(0);