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>

<div id="htmlEditor"></div>
    
    <div id="dialog">
        <div class="comboGroup" style="margin:5px">
            <div><span>言語</span></div>
            <select id="langsList">
                <option value="language-html">HTML/XML</option>
                <option value="language-javascript">Javascript</option>
                <option value="language-css">CSS</option>
                <option value="language-csharp">C#</option>
                <option value="language-c">C</option>
                <option value="language-cpp">C++</option>
            </select>
        </div>

        <div id="dialogTextArea" style="margin:5px"></div>
        <div id="okCancelButtons" class="buttonGroup">
            <button id="okButton"></button>
            <button id="cancelButton"></button>
        </div>
    </div>

CSS

#sampleContainer {
            overflow: visible;
        }
        div.ui-igdialog {
            width: 70% !important;
        }
        .comboGroup {
            float: left;
        }
        .buttonGroup > button {
            float: left;
            margin: 5px;
        }
        .buttonGroup {
            display: inline-block;
        }
        .ui-igbutton-code::before {
            content: "{;}";
            top: 30%;
            font-weight: bold;
        }
        div.ui-widget-overlay {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            margin-top: 0px !important;
        }
        .ui-igdialog-content > div {
            position: absolute;
        }
        #okCancelButtons {
            bottom: 10px;
            height:auto;
        }

        #dialogTextArea {
            top:70px;
            height:auto;
            bottom: 70px;
        }

JavaScript

$(function () {
            var height = $('html').hasClass('touch') ? 500 : 350;
            $("#htmlEditor").igHtmlEditor({
                width: "99%",
                height: height,
                value: "コード スニペットの挿入ボタン {;} をクリックしてコードを貼り付けます。",
                customToolbars: [
                    {
                        name: "CodeSnippets",
                        collapseButtonIcon: "ui-igbutton-collapse",
                        expandButtonIcon: "ui-igbutton-expand",
                        items: [{
                            //Definition for insert code button
                            name: "appendCodeSnippet",
                            type: "button",
                            handler: openDialog,
                            scope: this,
                            props: {
                                isImage: {
                                    value: false,
                                    action: '_isSelectedAction'
                                },
                                imageButtonTooltip: {
                                    value: "コード スニペットを挿入",
                                    action: '_tooltipAction'
                                },
                                imageButtonIcon: {
                                    value: "ui-igbutton-code",
                                    action: '_buttonIconAction'
                                }
                            }
                        }],
                    }],
                rendered: configIFrame
            });

            $("#dialog").igDialog({
                state: "closed",
                modal: true,
                draggable: true,
                resizable: false,
                height: "50%",
                headerText: "Place code here:",
                container: $("#htmlEditor_content"),
                headerText: "コードの挿入",
                showCloseButton: false,
            });

           ...