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

<div class="theme-container">
        <section>
            <div class="igsb-sample-desc">
                <p>This is the Ignite UI for jQuery Bootstrap Superhero 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>

            <br />
            <p>You can also generate your own Bootstrap-based themes for Ignite UI for jQuery using our Ignite UI for jQuery Bootstrap Theme Generator!</p>
            <div class="themeButtonContainer">
                <a class="themeButton" href="http://www.igniteui.com/bootstrap-theme-generator/superhero">
                    <span>Generate Your Own Custom Bootstrap Theme</span>
                </a>
            </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>
                   ...

CSS

.theme-container {
            color: #ebebeb;
            background-color: #2b3e50;
            padding: 10px;
        }

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

        .ui-tabs .ui-tabs-nav
        {
            border-bottom: 1px solid #4E5D6C;
        }

        .ui-tabs .ui-tabs-panel  {
            border: 1px solid #4E5D6C;
            border-top:none;
        }

        .sampleContainer p {
            line-height:28px;
            color:#ddd!important;
        }

        .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;
            color:#fff;
        }

        .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%;
            background: rgba(0,0,0, 0.1);
            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();

      ...