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/default/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>

<section>
        <div class="igsb-sample-desc">
            <p>これは Ignite UI for jQuery Bootstrap のデフォルト テーマです。 このテーマは 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/default">
                <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" value="John"></input>
            </div>

            <div>
                <label for="dateEditor">Date</label>
                <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: "製品 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
           ...