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-data/top-10-mountain-tops"></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>

<h4 class="combo-label">World's 10 Highest Mountain Peaks</h4>

    <div id="combo"></div>

    <a id="tooltip" title="Message"></a>

CSS

.combo-label {
            margin-bottom: .5em;
        }

        .tooltipStyle {
            max-width: 400px;
        }

        .glowing-border {
            outline: none !important;
            border-color: #8dff71 !important;
            box-shadow: 0 0 10px #8dff71 !important;
            background-color: #CBFF99;
        }

        .normal {
            border: 1px solid #bcbcbc;
            background-color: #ffffff;
            box-shadow: 0 0 5px #bcbcbc !important;
        }

JavaScript

$(function () {
            var tipIndex = 0;

            $("#combo").igCombo({
                width: "270px",
                textKey: "MountainName",
                valueKey: "ID",
                dataSource: mountainTops,
                multiSelection: {
                    enabled: true
                },
                dropDownOpened: function (evt, ui) {
                    if ((evt.keyCode == 40) && (tipIndex == 1)) {
                        showWellDoneMessage();
                    }
                },
                dropDownClosed: function (evt, ui) {
                    if ((evt.keyCode == 38) && (tipIndex == 4)) {
                        showWellDoneMessage();
                    }

                    //Close the drop down when there are selected items
                    if (evt.keyCode == 27 && tipIndex == 7 && $("#combo").igCombo("selectedItems")) {
                        showWellDoneMessage();
                    }
                },
                selectionChanged: function (evt, ui) {
                    if (evt.keyCode == 16 && (tipIndex == 6)) {
                        showWellDoneMessage();
                    }
                }
            });

            $("#tooltip").tooltip({
                position: { of: ".ui-igcombo-buttonicon", my: "left+55 center", at: "right center" },
                open: function (event, ui) {
                    $("#tooltip").tooltip("option", "content", getTip(tipIndex++));
                },
                tooltipClass: "tooltipStyle"
            });

            setTimeout(function () {
                startExample();
            }, 1500);


            $(document).keydown(function (e) {
                if (e.keyCode == 36 && e.ctrlKey && tipIndex == 3) {
                    var ddOpened = $("#combo").igCombo("dropDownOpened");

                    if (ddOpened) {
                        showWellDoneMessage();
                    } else {
                        showMessage("Open the Drop Down...