JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://paweldecowski.github.com/jQuery-CreditCardValidator/jquery.creditCardValidator.js"></script>

<div class="demo">
            <h3>Demo</h3>

            <div class="numbers">
                <p>Try some of these numbers:</p>

                <ul class="list">
                    <li>4000000000000002</li>
                    <li>4026000000000002</li>
                    <li>501800000009</li>
                    <li>5100000000000008</li>
                    <li>6011000000000004</li>
                </ul>
            </div>

            <form>
                <h2>Payment details</h2>

                <ul>
                    <li>
                        <ul class="cards">
                            <li class="visa">Visa</li>
                            <li class="visa_electron">Visa Electron</li>
                            <li class="mastercard">MasterCard</li>
                            <li class="maestro">Maestro</li>
                            <li class="discover">Discover</li>
                        </ul>
                    </li>

                    <li>
                        <label for="card_number">Card number</label>
                        <input type="text" name="card_number" id="card_number">
                    </li>

                    <li class="vertical">
                        <ul>
                            <li>
                                <label for="expiry_date">Expiry date <small>mm/yy</small></label>
                                <input type="text" name="expiry_date" id="expiry_date" maxlength="5">
                            </li>

                            <li>
                                <label for="cvv">CVV</label>
                                <input type="text" name="cvv" id="cvv" maxlength="3">
                            </li>
                        </ul>
                    </li>

                    <li class="vertical maestro">
                        <ul>
           ...

CSS

.demo .numbers {
  background-color: #ffd;
  border: 1px solid #eec;
  margin-bottom: 32px;
  padding: 16px 20px;
}
.demo .numbers p {
  margin-bottom: 0;
}
.demo .numbers .list {
  margin-bottom: 0;
}
.example {
  clear: both;
  margin-bottom: 32px;
}
.cards {
  overflow: hidden;
}
.cards li {
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  background-image: url('http://paweldecowski.github.com/jQuery-CreditCardValidator/card_logos.png');
  background-position: 0 0;
  float: left;
  height: 32px;
  margin-right: 8px;
  text-indent: -9999px;
  width: 51px;
}
.cards li:last-child {
  margin-right: 0;
}
.cards .visa_electron {
  background-position: 204px 0;
}
.cards .mastercard {
  background-position: 153px 0;
}
.cards .maestro {
  background-position: 102px 0;
}
.cards .discover {
  background-position: 51px 0;
}
.cards .visa.off {
  background-position: 0 32px;
}
.cards .visa_electron.off {
  background-position: 204px 32px;
}
.cards .mastercard.off {
  background-position: 153px 32px;
}
.cards .maestro.off {
  background-position: 102px 32px;
}
.cards .discover.off {
  background-position: 51px 32px;
}
form {
  -webkit-box-shadow: 0 1px 3px #bbbbbb;
  -moz-box-shadow: 0 1px 3px #bbbbbb;
  box-shadow: 0 1px 3px #bbbbbb;
  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));
  background: -webkit-linear-gradient(#ffffff, #f5f5f5);
  background: -moz-linear-gradient(#ffffff, #f5f5f5);
  background: -ms-linear-gradient(#ffffff, #f5f5f5);
  background: -o-linear-gradient(#ffffff, #f5f5f5);
  background: linear-gradient(#ffffff, #f5f5f5);
  background-color: #f8f8f8;
  border: 5px solid #fff;
  margin: 0 auto 32px;
  padding: 12px 24px 24px;
  width: 287px;
}
form h2 {
  color: #555;
  font-family: "Helvetica Neue", Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-style: normal;
  margin-bottom: 0;
}
form li {
 ...

JavaScript

(function() {

  $(function() {
    $('.demo .numbers li').wrapInner('<a href="#"></a>').click(function(e) {
      e.preventDefault();
      return $('#card_number').val($(this).text()).trigger('input');
    });
    $('.vertical.maestro').hide().css({
      opacity: 0
    });
    return $('#card_number').validateCreditCard(function(result) {
      if (!(result.card_type != null)) {
        $('.cards li').removeClass('off');
        $('#card_number').removeClass('valid');
        $('.vertical.maestro').slideUp({
          duration: 200
        }).animate({
          opacity: 0
        }, {
          queue: false,
          duration: 200
        });
        return;
      }
      $('.cards li').addClass('off');
      $('.cards .' + result.card_type.name).removeClass('off');
      if (result.card_type.name === 'maestro') {
        $('.vertical.maestro').slideDown({
          duration: 200
        }).animate({
          opacity: 1
        }, {
          queue: false
        });
      } else {
        $('.vertical.maestro').slideUp({
          duration: 200
        }).animate({
          opacity: 0
        }, {
          queue: false,
          duration: 200
        });
      }
      if (result.length_valid && result.luhn_valid) {
        return $('#card_number').addClass('valid');
      } else {
        return $('#card_number').removeClass('valid');
      }
    });
  });

}).call(this);