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 id="edit">Edit</button>
      <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.io/vgs-collect/1/vgs-collect-examples.js"></script>
    <script type="text/javascript">
    
    
      var f = VGSCollect.create('tntq4dwvhri', function (state) {
        document.getElementById('state').innerText = JSON.stringify(state, null, '  ');
      });
      
      let name, number;
      
      function initFields() {
        name = f.field('#cc-name .fake-input', {
              type: 'text',
              name: 'card.name',
              placeholder: 'Joe Business',
              validations: ['required'],
            });

        number =  f.field('#cc-number .fake-input',...