JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.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://jp.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>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<div class="theme-container">
        <section>
            <div class="igsb-sample-desc">
                <p>これは Ignite UI for jQuery Bootstrap の Superhero テーマです。  このテーマは Ignite UI for jQuery に依存せずに使用できますが、Bootstrap テーマに基づいているため、その他の Bootstrap テーマを持つ要素と共に使用できます。</p>
            </div>

            <br />
            <p>また、Ignite UI for jQuery Bootstrap テーマ ジェネレーターを使用すると、Ignite UI for jQuery のカスタム Bootstrap に基づくテーマを生成できます。</p>
            <div class="themeButtonContainer">
                <a class="themeButton" href="http://jp.igniteui.com/bootstrap-theme-generator/superhero">
                    <span>カスタム Bootstrap テーマを生成する</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>
                    <input id="textEditor"...

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: "製品 ID", key: "ProductID", dataType: "string", width: "0%", hidden: true },
                    { headerText: "製品名", key: "Name", dataType: "string", width: "40%" },
                    { headerText: "製品番号", key: "ProductNumber", dataType: "string", width: "20%" },
                    { headerText: "価格", key: "ListPrice", dataType: "number", width: "20%" },
                    { headerText: "標準の原価", 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();

            //igCombo
           ...