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/ios/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<section>
        <h1 class="pageTitle">igGrid</h1>
        <table id="grid"></table>
    </section>


    <section>
        <h1 class="pageTitle">igEditors</h1>
        <div class="igEditors flex">
            <div>
                <label for="textEditor">Text</label>
                <input id="textEditor" value="John"></input>
            </div>

            <div>
                <label for="dateEditor">Date</label>
                <input id="dateEditor" value="07/07/2012"></input>
            </div>

            <div>
                <label for="maskEditor">Mask</label>
                <input id="maskEditor" value="mask edit"></input>
            </div>

            <div>
                <label for="currencyEditor">Currency</label>
                <input class="text-rigth" id="currencyEditor" value="42"></input>
            </div>

            <div>
                <label for="numericEditor">Numeric</label>
                <input class="text-rigth" id="numericEditor" value="42"></input>
            </div>

            <div>
                <label for="percentEditor">Percent</label>
                <input class="text-rigth" id="percentEditor"...

CSS

.ui-helper-clearfix:after {
            content: "";
            display: table;
        }
     
        .flex {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: wrap; /* Safari 6.1+ */
            flex-wrap: wrap;
        }

        .ui-tabs .ui-tabs-panel {
            margin-top: auto;
        }

        .sampleContainer p {
            line-height: 28px;
        }

        .sampleContainer .ui-igcombo-wrapper {
            width: 100%;
        }

        igsb-sample-desc {
            font-size: 16px;
        }

        .themeButtonContainer {
            margin-bottom: 30px;
        }

        section {
            margin-bottom: 30px;
        }

        .sampleContainer .pageTitle {
            font-size: 20px;
            margin-bottom: 10px;
        }

        .igEditors input {
            width: 100%;
            margin-bottom: 15px;
            padding: 5px;
            box-sizing: border-box;
        }

        .igEditors > div:last-of-type input {
            padding: 0;
            height: 29px;
        }

        .igEditors label {
            display: block;
            margin-bottom: 5px;
        }

        .igEditors > div {
            min-width: 32%;
            margin: 5px;
        }

        .text-rigth {
            text-align: right;
        }

        .three-col > div {
            padding: 10px;
            min-width: 32.1%;
            background: #f9f9f9;
            margin: 5px;
            box-sizing: border-box;
        }

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();
            $("#dateEditor").igDateEditor();
            $("#maskEditor").igMaskEditor();
            $("#currencyEditor").igCurrencyEditor();
            $("#numericEditor").igNumericEditor();
            $("#percentEditor").igPercentEditor();
            $("#datePicker").igDatePicker();

      ...