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 id="dialog" class="sb-min-tablet-portrait">
        <p>
            <img src="https://jp.igniteui.com/images/samples/dialog-window/content.jpg"></img>
        </p>
        <button id="closeDialog"></button>
	</div>

    <div class="api-explorer">
        <fieldset>
            <legend>API</legend>
                <label>状態をコードで変更</label>
                <button id="createDialog">
		        </button>
		        <button id="destroyDialog">
		        </button>
		        <button id="openDialog">	
		        </button>
                <br />
                <button id="minimizeDialog">
                </button>
		        <button id="maximizeDialog">
                </button>
		        <button id="pinDialog">
                </button>
		        <button id="unpinDialog">
                </button>
                <br />
                <label>配置</label>
		        <select id="position" disabled="disabled">
			        <option selected="selected"></option>
			        <option>my:'left+50 top+50',at:'left top'</option>
			        <option>my:'left top',at:'left+200...

CSS

.ui-igdialog #dialog img {
            width: 100%;
        }
        #dialog img {
            width: 300px;
        }

JavaScript

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

            // Initialize buttons for create, destroy, open and close the igDialog
            $("#createDialog").igButton({ labelText: "ダイアログを作成" });
            $("#destroyDialog").igButton({ labelText: "ダイアログを破棄", disabled: true });
            $("#openDialog").igButton({ labelText: "ダイアログを開く", disabled: true });
            $("#closeDialog").igButton({ labelText: "ダイアログを閉じる", disabled: true });
            $("#maximizeDialog").igButton({ labelText: "ダイアログを最大化", disabled: true });
            $("#minimizeDialog").igButton({ labelText: "ダイアログを最小化", disabled: true });
            $("#pinDialog").igButton({ labelText: "ダイアログをピン固定", disabled: true });
            $("#unpinDialog").igButton({ labelText: "ダイアログのピン固定を解除", disabled: true });
            /*----------------- Method & Option Examples -------------------------*/

            // process events of buttons
            $('#createDialog').on({
                click: function () {
                    // Initialize the igDialog
                    $("#dialog").igDialog({
                        stateChanging: function (evt, ui) {
                            // Check the igDialog state  
                            if (ui.action === "close") {
                                $("#openDialog").igButton({ disabled: false });
                                $("#closeDialog").igButton({ disabled: true });
                            }

                            // Check the igDialog state
                            if (ui.action === "pin") {
                                $("#pinDialog").igButton({ disabled: true });
                                $("#unpinDialog").igButton({ disabled: false });
                            }

                            // Check the igDialog state
                            if (ui.action...