JSFiddle - React, Tailwind, and code Playground

HTML

<div class="demo-container">
            <div class="card-wrapper"></div>
            <div class="form-container active">
                <form action="">

                    <div class="row collapse">
                        <div class="small-6 columns">
                            <input placeholder="カード番号" type="text" name="number">
                        </div>
                        <div class="small-6 columns">
                            <input placeholder="名前" type="text" name="name">
                        </div>
                    </div>
                    <div class="row collapse">
                        <div class="small-3 columns">
                            <input placeholder="月/年" type="text" name="expiry">
                        </div>

                        <div class="small-3 columns">
                            <input placeholder="CVC" type="text" name="cvc">
                        </div>

                        <div class="small-6 columns">
                            <input type="submit" value="Submit" class="button postfix" disabled>
                        </div>
                    </div>
                </form>
            </div>
        </div>

CSS

meta.foundation-version {
    font-family: "/5.2.3/";
}

meta.foundation-mq-small {
    font-family: "/only screen/";
    width: 0em;
}

meta.foundation-mq-medium {
    font-family: "/only screen and (min-width:40.063em)/";
    width: 40.063em;
}

meta.foundation-mq-large {
    font-family: "/only screen and (min-width:64.063em)/";
    width: 64.063em;
}

meta.foundation-mq-xlarge {
    font-family: "/only screen and (min-width:90.063em)/";
    width: 90.063em;
}

meta.foundation-mq-xxlarge {
    font-family: "/only screen and (min-width:120.063em)/";
    width: 120.063em;
}

meta.foundation-data-attribute-namespace {
    font-family: false;
}

html, body {
    height: 100%;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    font-size: 100%;
}

body {
    background: #fff;
    color: #222;
    padding: 0;
    margin: 0;
    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    position: relative;
    cursor: default;
}

a:hover {
    cursor: pointer;
}

img {
    max-width: 100%;
    height: auto;
}

img {
    -ms-interpolation-mode: bicubic;
}

#map_canvas img, #map_canvas embed, #map_canvas object, .map_canvas img, .map_canvas embed, .map_canvas object {
    max-width: none !important;
}

.left {
    float: left !important;
}

.right {
    float: right !important;
}

.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.hide {
    display: none;
}

.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    display: inline-block;
    vertical-align: middle;
}

textarea {
    height: auto;
    min-height: 50px;
}

select {
    width: 100%;
}

.row {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    max-width:...

JavaScript

(function e(t, n, r) {
    function s(o, u) {
        if (!n[o]) {
            if (!t[o]) {
                var a = typeof require == "function" && require;
                if (!u && a) return a(o, !0);
                if (i) return i(o, !0);
                throw new Error("Cannot find module '" + o + "'")
            }
            var f = n[o] = {
                exports: {}
            };
            t[o][0].call(f.exports, function(e) {
                var n = t[o][1][e];
                return s(n ? n : e)
            }, f, f.exports, e, t, n, r)
        }
        return n[o].exports
    }
    var i = typeof require == "function" && require;
    for (var o = 0; o < r.length; o++) s(r[o]);
    return s
})({
    1: [function(require, module, exports) {
        // Generated by CoffeeScript 1.7.1
        (function() {
            var $, cardFromNumber, cardFromType, cards, defaultFormat, formatBackCardNumber, formatBackExpiry, formatCardNumber, formatExpiry, formatForwardExpiry, formatForwardSlash, hasTextSelected, luhnCheck, reFormatCardNumber, restrictCVC, restrictCardNumber, restrictExpiry, restrictNumeric, setCardType,
            __slice = [].slice,
                __indexOf = [].indexOf || function(item) {
                    for (var i = 0, l = this.length; i < l; i++) {
                        if (i in this && this[i] === item) return i;
                    }
                    return -1;
                };

            $ = jQuery;

            $.payment = {};

            $.payment.fn = {};

            $.fn.payment = function() {
                var args, method;
                method = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
                return $.payment.fn[method].apply(this, args);
            };

            defaultFormat = /(\d{1,4})/g;

            cards = [{
                type: 'maestro',
                pattern: /^(5018|5020|5038|6304|6759|676[1-3])/,
                format: defaultFormat,
          ...