JSFiddle - React, Tailwind, and code Playground

by VeryGoodFiddle

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />

    <link
      rel="stylesheet"
      type="text/css"
      href="https://www.verygoodsecurity.com/theme/css/main.css"
    />

    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
      crossorigin="anonymous"
    />
    <style>
      body {
        padding: 20px;
        font-family: "Helvetica Neue", "sans-serif";
        font-size: 16px;
        color: #576f7f;
      }
      
      form {
        max-width: 100%;
        margin-bottom: 40px;
      }

      iframe {
        height: 100%;
      }

      form #cc-holder .field-space {
        display: block;
        padding: 9px 12px;
        background-color: #eff4ff8c;
        min-width: 100%;
        max-width: 500px;
      }

      .inner-container div {
        width: 100%;
      }

      #file-upload .field-space {
        width: 150px;
        background-color: #576f7f;
      }

      .field-space {
        display: block;
        height: 50px;
        border: 1px solid transparent;
        border-radius: 4px;
        box-shadow: 0 1px 3px 0 #b1bdcd;
      }

      form pre {
        display: flex;
        align-items: center;
        margin-top: 1rem;
        font-size: 14px;
        width: 45%;
      }

      form .inner-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .submit {
        height: 45px;
        width: 100%;
        box-shadow: 0 1px 3px 0 #b1bdcd;
      }
    </style>
    <script src="http://localhost:9000/development.js"></script>
  </head>
  <body>
    <main>
      <section class="container">
        <form id="form" class="form">
          <div id="cc-holder" class="inner-container">
          ...

JavaScript

const f = VGSCollect.create("file-upload", function(state) {});

// f.getUrl = () => 'http://localhost:9000/development.js';

const css = {
  fontSize: '14px',
  fontFamily: 'Helvetica Neue, sans-serif',
  fontWeight: '200',
  '&:placeholder': {
    fontSize: '14px',
    fontFamily: 'Helvetica Neue, sans-serif',
    fontWeight: '200',
    color: '#756bb1'
  },
  color: '#756bb1',
};

f.field('#cc-holder .field-space', {
  type: 'text',
  name: 'card-name',
  placeholder: 'Joe Business',
  validations: ['required'],
  ariaLabel: 'Card holder name input',
  css: css
}).replacePattern('/[^a-zA-Z\\s]+/g');

f.field('#file-upload .field-space', {
    type: 'file',
    name: 'data',
    css: {
      '& + label': {
        'width': '150px',
        'fontSize': '14px',
        'color': 'white',
        'display': 'inline-block',
        'height': '100%',
        '&::before': {
          'content': '"Choose file"',
          'position': 'absolute',
          'top': '50%',
          'left': '50%',
          'transform': 'translate(-50%, -50%)',
        }
      }
    }
});

document.getElementById('form').addEventListener(
  'submit',
  function(e) {
    e.preventDefault();
    f.submit('/post', {}, function(status, data) {
      document.getElementById('response').innerText = JSON.stringify(
        data.json,
        null,
        '  '
      );
    });
  },
  false
);