JSFiddle - React, Tailwind, and code Playground

by Sergey Linnick

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<form>
  <h2>Card number</h2>
  <input id="card_number" type="text" placeholder="...">
</form>

SCSS

// colors
$white: #fff;
$light-grey: #eee;
$grey: #777;
$black: #222;
$blue: #0079ff;
$blue2: #2e85e2;

//url
$url_0: url(http://jquerycreditcardvalidator.com/images/images.png);

// Stlyes



form {
	border-radius: 2px;
	margin: 0 auto 0;
	padding: 13px 20px;
	width: 290px;
	label {
		visibility: hidden;
	}

	input::-webkit-input-placeholder {
		color: $black;
	}
	input::-moz-placeholder {
		color: $black;
		opacity: 1;
	}
	#card_number {
		background-image: $url_0, $url_0;
		background-position: 2px -121px, 260px -61px;
		background-size: 120px 361px, 120px 361px;
		background-repeat: no-repeat;
		padding-left: 54px;
		width: 225px;
		&.visa {
			background-position: 2px -163px, 260px -61px;
		}
		&.visa_electron {
			background-position: 2px -205px, 260px -61px;
		}
		&.mastercard {
			background-position: 2px -247px, 260px -61px;
		}
		&.maestro {
			background-position: 2px -289px, 260px -61px;
		}
		&.discover {
			background-position: 2px -331px, 260px -61px;
		}
	}
	#card_number.valid {
		&.visa {
			background-position: 2px -163px, 260px -87px;
		}
		&.visa_electron {
			background-position: 2px -205px, 260px -87px;
		}
		&.mastercard {
			background-position: 2px -247px, 260px -87px;
		}
		&.maestro {
			background-position: 2px -289px, 260px -87px;
		}
		&.discover {
			background-position: 2px -331px, 260px -87px;
		}
	}
}

JavaScript

// Credit to: http://jquerycreditcardvalidator.com

// Generated by CoffeeScript 1.8.0
(function() {
  /* http://prismjs.com/download.html?themes=prism&languages=clike+javascript */
var self = (typeof window !== 'undefined') ? window : {};

/**
 * Prism: Lightweight, robust, elegant syntax highlighting
 * MIT license https://www.opensource.org/licenses/mit-license.php/
 * @author Lea Verou http://lea.verou.me
 */

var Prism = (function(){

// Private helper vars
var lang = /\blang(?:uage)?-(?!\*)(\w+)\b/i;

var _ = self.Prism = {
	util: {
		encode: function (tokens) {
			if (tokens instanceof Token) {
				return new Token(tokens.type, _.util.encode(tokens.content));
			} else if (_.util.type(tokens) === 'Array') {
				return tokens.map(_.util.encode);
			} else {
				return tokens.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/\u00a0/g, ' ');
			}
		},

		type: function (o) {
			return Object.prototype.toString.call(o).match(/\[object (\w+)\]/)[1];
		},

		// Deep clone a language definition (e.g. to extend it)
		clone: function (o) {
			var type = _.util.type(o);

			switch (type) {
				case 'Object':
					var clone = {};

					for (var key in o) {
						if (o.hasOwnProperty(key)) {
							clone[key] = _.util.clone(o[key]);
						}
					}

					return clone;

				case 'Array':
					return o.slice();
			}

			return o;
		}
	},

	languages: {
		extend: function (id, redef) {
			var lang = _.util.clone(_.languages[id]);

			for (var key in redef) {
				lang[key] = redef[key];
			}

			return lang;
		},

		// Insert a token before another token in a language literal
		insertBefore: function (inside, before, insert, root) {
			root = root || _.languages;
			var grammar = root[inside];
			var ret = {};

			for (var token in grammar) {

				if (grammar.hasOwnProperty(token)) {

					if (token == before) {

						for (var newToken in insert) {

							if (insert.hasOwnProperty(newToken)) {
								ret[newToken] =...