JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.3.1/jquery.maskedinput.js"></script>
<script src="http://cdn.vride.com/libs/vanpool/1.113.0/js/external/jquery.creditCardValidator.js"></script>
<div id="ccHolder" class="mastercard">

                </div>
<div class="editor-field2 w100">
                    <span>Credit Card Number:</span>
                    <input class="w100 input-validation-error" data-val="true" data-val-regex="Invalid format" data-val-regex-pattern="^((4\d{3})|(5[1-5]\d{2})|(6011))-?\d{4}-?\d{4}-?\d{4}|3[4,7]\d{13}$" data-val-required="Required" id="ccnumber" name="ccnumber" placeholder=" " type="text" value="">
             
                </div>

CSS

#ccHolder{
    
background-image: url('../../Images/ccs1.png');
background-position: 0px -180px;
background-repeat: repeat-x;
height: 46px;
width: 55px;
/* float: left; */
position: relative;
top: 34px;
left: 22%;
}

#ccnumber{
    padding-left: 15%;
}

.visa{
    background-position: 0px -45px !important;
    background-color:#f47a20;
}

.mastercard{
    background-position: 0px 0px !important;
    background-color:red;
}
.discover{
    background-position: 0px -90px !important;
    background-color:rgba(0,0,0,.2);
}

.amex{
    background-position: 0px -140px !important;
    background-color:blue;
}

JavaScript

$('#ccnumber').validateCreditCard(function (result) {
        // this will execute everytime the value of the `#cc_number` field changes



        if (result.card_type == null) {
            $("#ccHolder").removeClass();

        }
        if (result.card_type != null) {
            cardtype = result.card_type.name;


            $("#ccHolder").addClass(result.card_type.name);

            if (result.card_type.name === 'visa') { //if the card is Visa
                $("#ccnumber").mask("9999-9999-9999-9999", { placeholder: " ", autoclear: false });

            }
            if (result.card_type.name === 'amex') { //if the card is American Express
                $("#ccnumber").mask("999-999999-999999", { placeholder: " ", autoclear: false });

            }
            if (result.card_type.name === 'mastercard') { //if the card is MasterCard
                $("#ccnumber").mask("9999-9999-9999-9999", { placeholder: " ", autoclear: false });

            }
            if (result.card_type.name === 'discover') { //if the card is Discover
                $("#ccnumber").mask("9999-9999-9999-9999", { placeholder: " ", autoclear: false });

            }
            if (result.card_type.name === 'JCB') { //if the card is JCB
                $("#ccnumber").mask("9999-9999-9999-9999", { placeholder: " ", autoclear: false });

            }
            if (result.card_type.name === 'Diners Club') { //if the card is Diners Club
                $("#ccnumber").mask("999-999999-99999", { placeholder: " ", autoclear: false });
            }

        }
    });