JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="https://igniteui.com/data-files/adventureworks.min.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/metro/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<h2>igGrid</h2>
    <table id="grid"></table>

    <h2>igEditors</h2>
    
    <p>
        <input id="textEditor" value="John"></input></p>
    <p>
        <input id="dateEditor" value="07/07/2012"></input></p>
    <p>
        <input id="maskEditor" value="mask edit"></input></p>
    <p>
        <input id="currencyEditor" value="42"></input></p>
    <p>
        <input id="numericEditor" value="42"></input></p>
    <p>
        <input id="percentEditor" value="0.42"></input></p>
    <p style="padding: 2px">
        <input id="datePicker" type="date"></input></p>

    <h2>igCombo</h2>
    <div id="combo"></div>

    <h2>igTree</h2>
    <ul id="tree"></ul>

    <h2>igDialog</h2>
    <input type="button" id="openDialog"></input>
    <div id="dialog">
        <img style="width: 200px" src="https://igniteui.com/images/samples/dialog-window/content.jpg"></img>
    </div>

    <h2>igDataChart</h2>
    <div style="width: 80%; min-width: 210px;">
        <div id="chart"></div>
    </div>

    <h2>jQuery UI Tabs</h2>
    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">Lorem ipsum</a></li>
        <li><a href="#tabs-2">Nunc lacinia</a></li>
        <li><a...

JavaScript

$(function () {
            //igGrid
            $("#grid").igGrid({
                autoGenerateColumns: false,
                width: "100%",
                primaryKey: "ProductID",
                columns: [
                    { headerText: "Product ID", key: "ProductID", dataType: "string", width: "0%", hidden: true },
                    { headerText: "Product Name", key: "Name", dataType: "string", width: "40%" },
                    { headerText: "Product Number", key: "ProductNumber", dataType: "string", width: "20%" },
                    { headerText: "List Price", key: "ListPrice", dataType: "number", width: "20%" },
                    { headerText: "Standard Cost", key: "StandardCost", dataType: "number", width: "20%" }
                ],
                dataSource: adventureWorks,
                features: [
                    {
                        name: "Paging",
                        type: "local",
                        pageSize: 10
                    },
                    {
                        name: "Sorting",
                        type: "local"
                    },
                    {
                        name: "Filtering",
                        type: "local"
                    },
                    {
                        name: "Updating",
                        dataDirty: function (evt, ui) {
                            ui.owner.grid.commit();
                            return false;
                        }
                    },
                    {
                        name: "Summaries"
                    }
                ]
            });

            //igEditors
            $("#textEditor").igTextEditor({ width: 150 });
            $("#dateEditor").igDateEditor({ width: 150 });
            $("#maskEditor").igMaskEditor({ width: 150 });
            $("#currencyEditor").igCurrencyEditor({ width: 150 });
            $("#numericEditor").igNumericEditor({ width: 150 });
           ...