JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-base.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-gantt.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-exports.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-ui.min.js"></script>
    <link rel="stylesheet" href="https://cdn.anychart.com/releases/8.0.1/css/anychart-ui.min.css" />
    
        <div id="container"></div>

CSS

html, body, #container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

JavaScript

anychart.themes.defaultTheme.defaultDataGrid.tooltip.padding = {top: 1, right: 1, bottom: 1, left: 1};


anychart.onDocumentReady(function () {

    var treeData = anychart.data.tree(data, 'as-table');

    chart = anychart.ganttResource();
    chart.container("container");
    chart.bounds(0, 0, "100%", "100%");
    chart.data(treeData);

    var dataGrid = chart.dataGrid();

    // settings for the first column which is invisible
    dataGrid.column(0).width('0%');
    dataGrid.column(0).enabled(false);
    // settings for the second column
    dataGrid.column(1).width('20%').title().text("#");
    dataGrid.column(1).format(function (item) {
        return item.get("id");
    });
    // settings for the third column
    dataGrid.column(2).width('80%').format(function (item) {
        return item.get("name");
    }).title().text("Person");

    chart.draw();
    chart.zoomTo(1171036800000, 1176908400000);

    chart.splitterPosition(250);
});

// set label object to configure labels in periods
var data = [
    {
        "id": "1",
        "name": "Period 1",
        "periods": [
            {
                "id": "1_1",
                "start": 1171468800000,
                "end": 1171987200000
            }]
    },
    {
        "id": "2",
        "name": "Period 2",
        "periods": [
            {
                "id": "1_2",
                "start": 1171668800000,
                "end": 1171887200000
            }]
    }
];