JSFiddle - React, Tailwind, and code Playground

by VeryGoodFiddle

HTML

<script src="https://js.verygoodvault.com/vgs-collect/1/ACgJtreu47qJeCgSTX8oCtzD.js"></script>
<form>
  <div id="cc-holder" class="form-field"></div>
  <div id="cc-number" class="form-field"></div>
  <div class="form-field-group">
    <div id="cc-expiration-date" class="form-field"></div>
    <div id="cc-cvc" class="form-field"></div>
  </div>
  <button type="submit">Submit</button>
</form>

CSS

* {
  box-sizing: border-box;
}
form {
  width: 300px;
  margin: 0 auto;
}

.form-field {
  width: 100%;
  height: 40px;
  position: relative;
  background: white;
  margin-bottom: 10px;
  border-radius: 4px;
  box-shadow: 0 0 3px 0px rgba(0, 0, 0, .3);
  padding: 0 10px;
}

iframe {
  width: 100%;
  height: 100%;
}

.form-field-group {
  display: flex;
  flex-flow: wrap;
}

.form-field-group div {
   flex: 0 0 50%;
}

.form-field-group div:first-child {
  border-radius: 4px 0 0 4px;
}

.form-field-group div:last-child {
  border-radius: 0 4px 4px 0;
}

JavaScript

const vgsForm = window.VGSCollect.create('tnt3auhbgr8', () => {});
        const css = {
          boxSizing: 'border-box',
          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI"',
        };
        vgsForm.field('#cc-holder', {
          type: 'text',
          name: 'card_holder',
          placeholder: 'Card holder',
          validations: ['required'],
          css: css,
        });
        vgsForm.field('#cc-number', {
          type: 'card-number',
          name: 'card_number',
          successColor: '#4F8A10',
          errorColor: '#D8000C',
          placeholder: 'Card number',
          showCardIcon: true,
          validations: ['required', 'validCardNumber'],
          css: css,
        });
        vgsForm.field('#cc-cvc', {
          type: 'card-security-code',
          name: 'card_cvc',
          successColor: '#4F8A10',
          errorColor: '#D8000C',
          placeholder: 'CVC',
          maxLength: 3,
          validations: ['required', 'validCardSecurityCode'],
          css: css,
        });
        vgsForm.field('#cc-expiration-date', {
          type: 'card-expiration-date',
          name: 'card_exp',
          successColor: '#4F8A10',
          errorColor: '#D8000C',
          placeholder: 'MM / YY',
          validations: ['required', 'validCardExpirationDate'],
          css: css,
        });