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/credit-cards"></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>

<div class="payment-form">
        <div id="paymentType" name="paymentType"></div>
        <div id="payment-label"><label id="paymentTypeLabel" for="paymentType">This seller accepts credit card only</label></div>
    </div>
    <div class="card-form">
        <div id="creditCardType"></div><img src="https://igniteui.com/images/samples/credit-cards/visa_logo_large.gif" id="cardLogo" class="card-logo" alt="Visa"></img>

        <div id="creditCardNumber"></div>
        <div class="good-through ui-state-disabled">
            <label>GOOD<br />THRU</label>
        </div>
        <div id="month" name="month"></div>
        <div id="year"></div>
        <input id="ccv"></input>
    </div>
    <input type="button" value="Buy" id="buy"></input>

CSS

.payment-form {
            width:100%;overflow:hidden;
        }
        #paymentType {
            float:left;
        }
        #payment-label {
            line-height:32px;
            margin-left:210px;
        }
        .card-form {
            width: 350px;
            border: 2px solid #0094ff;
            border-radius: 15px;
            padding: 25px 15px 0px 15px;
        }

        .card-logo {
            margin-left: 9px;
        }

        .ui-igcombo-wrapper,
        .ui-igedit {
            margin-bottom: 25px;
        }

        #creditCardNumber .ui-igcombo-button { display: none; }

        .good-through {
            float: left;
            margin-right: 5px;
        }

        #buy {
            margin-top: 10px;
            margin-left: 260px;
        }

JavaScript

$(function () {
            var selectedCardType = "Visa";
            $("#paymentType").igCombo({
                textKey: "Text",
                valueKey: "Text",
                dataSource: paymentTypes,
                mode: "readonlylist"
            }).attr("title", "This combo is in readonlylist mode. It shows the drop down, but is not editable and items are not selectable.").igPopover({
                direction: "top",
                headerTemplate: {
                    closeButton: true
                },
                closeOnBlur: true,
                animationDuration: 150,
                maxHeight: null,
                maxWidth: 170,
                showOn: "focus"
            });

            $("#creditCardType").igCombo({
                width: "240px",
                textKey: "Text",
                valueKey: "Text",
                dataSource: creditCardTypes,
                mode: "dropdown",
                enableClearButton: false,
                selectionChanged: function (event, ui) {
                    selectedCardType = ui.items[0].data.Text;
                    $("#cardLogo").attr({
                        "src": ui.items[0].data.Image,
                        "alt": selectedCardType
                    });
                    $("#creditCardNumber").igCombo("option", "dataSource", creditCards[selectedCardType]);
                    if (selectedCardType === "American Express") {
                        $("#ccv").igNumericEditor("option", "maxValue", 9999);
                    } else {
                        $("#ccv").igNumericEditor("option", "maxValue", 999);
                        $("#ccv").igNumericEditor("value", null);
                    }
                }
            }).attr("title", "This combo is in dropdown mode. Only items from the list can be selected.").igPopover({
                direction: "top",
                headerTemplate: {
                    closeButton: true
                },
               ...