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

<section>
        <div class="igsb-sample-desc">
            <p>This is the Ignite UI for jQuery Bootstrap 4 default theme.  You can use this independently of Bootstrap for Ignite UI for jQuery, but it is based on this Bootstrap theme so that you can use it along with other Bootstrap-themed elements.</p>
        </div>
    </section>

    <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>
 ...

CSS

.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();

      ...