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-name" class="form-group">
        <label for="cc-name-field">Name on card</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>
      <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/vgs-collect/2.0/vgs-collect.js"></script>
    <script type="text/javascript">
      var f = VGSCollect.create('tntq4dwvhri', 'sandbox', function (state) {
        if(Object.keys(state).length === 2) {
          console.log('loaded!');
        }
        document.getElementById('state').innerText = JSON.stringify(state, null, '  ');
      });
      const field = f.field('#cc-name .fake-input', {
        type: 'text',
        name: 'card.name',
        placeholder: 'Joe Business',
        validations: ['required'],
      });
      f.field('#cc-number .fake-input', {
        type: 'text',
        name: 'card.number',
    ...