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

<button id="openDialog">	
	 </button>
    
	<div id="dialog">
        <p>
            <img style="width: 100%" src="https://jp.igniteui.com/images/samples/dialog-window/content.jpg"></img>
        </p>
	</div>

JavaScript

$(function () {
            // Initialize the open button with igButton
            $("#openDialog").igButton({ labelText: "ダイアログを開く" });

            $("#dialog").igDialog({
                imageClass: "ui-icon ui-icon-flag",
                closeButtonTitle: "ダイアログ ウィンドウを閉じる",
                minimizeButtonTitle: "ダイアログ ウィンドウを最小化",
                maximizeButtonTitle: "ダイアログ ウィンドウを最大化",
                pinButtonTitle: "ダイアログ ウィンドウをピン固定",
                unpinButtonTitle: "ダイアログ ウィンドウのピン固定を解除",
                restoreButtonTitle: "ダイアログ ウィンドウの復元",
                showMinimizeButton: true,
                showMaximizeButton: true,
                showPinButton: true,
                zIndex: 100005,
                height: "300px",
                width: "280px"
            });

            $('#openDialog').on({
                click: function () {
                    // Open the igDialog
                    $("#dialog").igDialog("open");
                }
            });

        });