JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<span id="cc_icons"></span>

<input type="text" id="cc" onkeyup="runvalidCreditcard()">

CSS

.icon-disabled{
  filter: grayscale(1);
  opacity: 0.5
}

JavaScript

const cards = [
  {
      name: "Visa",
      length: "13,16",
      prefixes: "4",
      icon: "https://abload.de/img/visa4hjed.png"
  },{
      name: "MasterCard",
      length: "16",
      prefixes: "51,52,53,54,55",
      icon: "https://abload.de/img/mastercardgwkgg.png"
  },{
      name: "DinersClub",
      length: "14,16",
      prefixes: "36,38,54,55",
      icon: "https://abload.de/img/diners-clubw2jsa.png"
  },{
      name: "CarteBlanche",
      length: "14",
      prefixes: "300,301,302,303,304,305",
      icon: "https://abload.de/img/carte-blanchem1jkm.png"
  },{
      name: "AmEx",
      length: "15",
      prefixes: "34,37",
      icon: "https://abload.de/img/amexo5k1m.png"
  },{
      name: "Discover",
      length: "16",
      prefixes: "6011,622,64,65",
      icon: "https://abload.de/img/discover0sj1t.png"
  },{
      name: "JCB",
      length: "16",
      prefixes: "35",
      icon: "https://abload.de/img/jcb48k5o.png"
  },{
      name: "enRoute",
      length: "15",
      prefixes: "2014,2149",
      icon: "https://abload.de/img/enroutezgk1r.png"
  },{
      name: "Solo",
      length: "16,18,19",
      prefixes: "6334,6767",
      icon: "https://abload.de/img/solo74kov.png"
  },{
      name: "Switch",
      length: "16,18,19",
      prefixes: "4903,4905,4911,4936,564182,633110,6333,6759",
      icon: "https://abload.de/img/switchq5jk1.png"
  },{
      name: "Maestro",
      length: "12,13,14,15,16,18,19",
      prefixes: "5018,5020,5038,6304,6759,6761,6762,6763",
      icon: "https://abload.de/img/maestroosjca.png"
  },{
      name: "VisaElectron",
      length: "16",
      prefixes: "4026,417500,4508,4844,4913,4917",
      icon: "https://abload.de/img/visa-electroniqk9l.png"
  },{
      name: "LaserCard",
      length: "16,17,18,19",
      prefixes: "6304,6706,6771,6709",
      icon: "https://abload.de/img/lasercardqwk2e.png"
  },{
      name: "Bancontact",
      length: "16,19",
      prefixes: "6703,4871",
      icon:...