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>

<h3>メッセージを参照してください</h3>    
    <input id="successEditor1"></input>
    <br />
    <br />
    <br />
    <div>
        <div class="float">
            <label>メッセージ状態:</label>
            <select id="state">
                <option value="success" selected="">成功</option>
                <option value="info">情報</option>
                <option value="warning">警告</option>
                <option value="error">エラー</option>
            </select>
        </div>
        <div class="float">
            <label>メッセージ モード:</label>
            <select id="mode">
                <option value="auto" selected="">自動</option>
                <option value="popover">ポップオーバー</option>
                <option value="inline">インライン</option>
            </select>
        </div>
        <div class="float">
            <label>ポップオーバー方向:</label>
            <select id="direction">
                <option value="top" selected="">上</option>
                <option value="left">左</option>
                <option value="right">右</option>
                <option value="bottom">下</option>
            </select>
        </div> 
        <div class="buttons">
            <br />
            <br />
            <button id="show"> 表示</button>
            <button...

CSS

div.float {
            float: left;
            margin-right: 10px;
        }
            div.float label {
                display: block;
                line-height: 20px;
                font-family: 'Open Sans',Arial,sans-serif;
                font-size: 13px;
            }
        select {
            width: 150px;
            height: 28px;
            opacity: 1;
        }        

        div.buttons {
            clear:both;
        }
        .buttons button {
            width: 70px;
            height: 29px;
            opacity: 1;           
            float:left;           
            margin-right:20px;
            background-color: rgb(226, 226, 226);
        }
        #successEditor1 {
            margin-top: 20px;
            margin-bottom: 0px;
        }
        @media screen and (max-width: 500px) {
            div.float { clear: both; }
        }

JavaScript

$(function () {
           $("#successEditor1").igNotifier({
               direction: "right",
               locale: {
                   infoMsg: "情報メッセージ。",
                   successMsg: "成功メッセージ。",
                   warningMsg: "警告メッセージ。",
                   errorMsg: "エラー メッセージ。"
               }
            }).igNotifier("notify", "success");

            $("#state").on("change", function myfunction() {
                var state = $(this).find("option:selected").val();

                $("#successEditor1").igNotifier("option", "state", state);
            });

            $("#mode").on("change", function myfunction() {
                var mode = $(this).find("option:selected").val();

                $("#successEditor1").igNotifier("option", "mode", mode);
            });

            $("#direction").on("change", function myfunction() {
                var direction = $(this).find("option:selected").val();

                $("#successEditor1").igNotifier("option", "direction", direction);
            });

            $("#show").on("click", function myfunction() {
                $("#successEditor1").igNotifier("show");
            });
            $("#hide").on("click", function myfunction() {
                $("#successEditor1").igNotifier("hide");
            });
        });