JSFiddle - React, Tailwind, and code Playground

by VeryGoodFiddle

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form id="cc-form">
      <div id="cc-exp-date" class="form-group">
        <label for="cc-name-field">Expiration date</label>
        <div class="form-control-static">
          <span class="fake-input"></span>
        </div>
      </div>
      <div id="cc-number" class="form-group">
        <label for="cc-name-field">Number</label>
        <div class="form-control-static">
          <span class="fake-input"></span>
        </div>
      </div>
      <div id="name" class="form-group">
        <label for="name">Name</label>
        <div class="form-control-static">
          <span class="fake-input"></span>
        </div>
      </div>
      <button type="submit" class="btn btn-info">Submit</button>
    </form>

    <pre id="state"></pre>
    <pre id="response"></pre>
    <style media="screen">
      .form-control-static iframe {
        height: 100%;
        vertical-align: middle;
      }
      .form-control-static span.fake-input {
        background-color: #fff;
        border: 1px solid #BFBFBF;
        padding: 1px;
        height: 27px;
        position: relative;
        display: inline-block;
      }
      .form-control-static span.fake-area {
        background-color: #fff;
        border: 1px solid #BFBFBF;
        padding: 1px;
        position: relative;
        display: inline-block;
      }
      iframe {
        border: 0px solid transparent;
      }
    </style>
    <script type="text/javascript" src="https://js.verygoodvault.com/js-vgfield-2/lacore3.js"></script>
    <script type="text/javascript">
      var f = SecureForm.create('sandbox', function (state) {
        document.getElementById('state').innerText = JSON.stringify(state, null, '  ');
      });

      f.field('#cc-exp-date .fake-input', {
        type: 'card-expiration-date',
        name: 'attributes.card',
        validations: ['required'],
        serializers: [{name: 'separate',...