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://jp.igniteui.com/js/apiviewer.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<link href="https://jp.igniteui.com/css/apiviewer.css" rel="stylesheet" type="text/css"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<div class="api-explorer noprint">
        <button id="split-expand">展開</button>
        <button id="split-collapse">縮小</button>
    </div>
    <br />
    <div id="split-button"></div>
    <div class="api-viewer noprint"></div>

CSS

@media print {
            .noprint {
                display: none;
            }
        }

        .arrorRight {
        }

        .arrorLeft {
        }

JavaScript

$(function () {
            // Used to show output in the API Viewer at runtime, 
            // defined in external script 'apiviewer.js'    
            var apiViewer = new $.ig.apiViewer();

            $("#split-button").igSplitButton({
                items: [{
                    name: "arrowLeft",
                    label: "arrowLeft",
                    icon: "ui-igbutton ui-igbutton-undo"
                }, {
                    name: "arrorRight",
                    label: "arrorRight",
                    icon: "ui-igbutton ui-igbutton-redo"
                }],
                defaultItemName: "arrowLeft"
            });

            $("#split-button").on("igsplitbuttonclick", function () {
                var message = "igsplitbuttonclick";
                apiViewer.log(message);
            });

            $("#split-button").on("igsplitbuttonexpanded", function () {
                var message = "igsplitbuttonexpanded";
                apiViewer.log(message);
            });

            $("#split-button").on("igsplitbuttonexpanding", function () {
                var message = "igsplitbuttonexpanding";
                apiViewer.log(message);
            });

            $("#split-button").on("igsplitbuttoncollapsed", function () {
                var message = "igsplitbuttoncollapsed";
                apiViewer.log(message);
            });

            $("#split-button").on("igsplitbuttoncollapsing", function () {
                var message = "igsplitbuttoncollapsing";
                apiViewer.log(message);
            });

            // Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation. 
            // Those events are only raised by their respective user interaction.
            $("#split-expand").on("click", function (e) {
                $("#split-button").igSplitButton("expand", e);
            });

            // Calling API...