JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.grapecity.com/wijmo/5.20211.781/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20211.781/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20211.781/controls/wijmo.input.min.js"></script>
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.20211.781/styles/wijmo.css">
<script src="https://cdn.grapecity.com/wijmo/5.20211.781/controls/wijmo.touch.min.js"></script>
<div id="gsGrid"></div>

CSS

/* set default grid style */
.wj-flexgrid {
  height: 300px;
  background-color: white;
  box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75);
  margin-bottom: 12px;
}

JavaScript

var cvGettingStarted = new wijmo.collections.CollectionView(getData(10));
var gsGrid = new wijmo.grid.FlexGrid('#gsGrid', {
    itemsSource: cvGettingStarted
});

// create some random data
function getData(cnt) {
    var data = [],
        dt = new Date(),
        countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'],
        products = ['Widget', 'Gadget', 'Doohickey'],
        colors = ['Black', 'White', 'Red', 'Green', 'Blue'];
    for (var i = 0; i < cnt; i++) {
        var date = new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
            countryId = Math.floor(Math.random() * countries.length),
            productId = Math.floor(Math.random() * products.length),
            colorId = Math.floor(Math.random() * colors.length);
        data.push({
            id: i,
            start: date,
            end: date,
            country: countries[countryId],
            product: products[productId],
            color: colors[colorId],
            amount: Math.random() * 10000 - 5000,
            active: i % 4 === 0,
        });
    }
    return data;
}