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://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://igniteui.com/css/apiviewer.css" rel="stylesheet" type="text/css"></link>

<div id="splitter">
        <div>First Panel</div>
        <div>Second Panel</div>
    </div>

    <div class="api-explorer">
        <fieldset>
            <legend>Splitter API settings</legend>
            <input type="button" id="igButtonSplitterFirstPanelCollapse" value="Collapse First Panel" style="margin-bottom: 20px;"></input>
            <input type="button" id="igButtonSplitterFirstPanelExpand" value="Expand First Panel" style="margin-bottom: 20px;"></input>
            <input type="button" id="igButtonSplitterSecondPanelCollapse" value="Collapse Second Panel" style="margin-bottom: 20px;"></input>
            <input type="button" id="igButtonSplitterSecondPanelExpand" value="Expand Second Panel" style="margin-bottom: 20px;"></input>
            
            <br />
            Change content with  <input type="text" id="firstPanelText"></input> at the <input type="button" id="igButtonSplitterFirstPanel" value="First Panel" style="margin-bottom: 20px;"></input>
            <br />
            Change content with  <input type="text" id="secondPanelText"></input> at the <input type="button" id="igButtonSplitterSecondPanel" value="Second Panel" style="margin-bottom:...

JavaScript

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

            /*----------------- Method & Option Examples -------------------------*/

            // process events of buttons
            $('#igButtonSplitterFirstPanelCollapse').on({
                click: function () {
                    $("#splitter").igSplitter("collapseAt", 0);
                }
            });

            $('#igButtonSplitterSecondPanelCollapse').on({
                click: function () {
                    $("#splitter").igSplitter("collapseAt", 1);
                }
            });

            $('#igButtonSplitterFirstPanelExpand').on({
                click: function () {
                    $("#splitter").igSplitter("expandAt", 0);
                }
            });

            $('#igButtonSplitterSecondPanelExpand').on({
                click: function () {
                    $("#splitter").igSplitter("expandAt", 1);
                }
            });

            $('#igButtonSplitBarButtons').on({
                click: function () {
                    $("#splitter").igSplitter("splitBar").children("div").remove();
                }
            });

            $('#igButtonSplitterFirstPanel').on({
                click: function () {
                    $("#splitter").igSplitter("firstPanel").text($("#firstPanelText").val());
                }
            });

            $('#igButtonSplitterSecondPanel').on({
                click: function () {
                    $("#splitter").igSplitter("secondPanel").text($("#secondPanelText").val());
                }
            });

            $('#igButtonSplitterFirstPanelSize').on({
                click: function () {
                    $("#splitter").igSplitter("setFirstPanelSize", $("#firstPanelSize").val());
                }
            });

           ...