JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<pre class="output"></pre>

<form class="form">
  <fieldset class="block">
    <legend class="description">Data</legend>
  
    <div class="group">
      <label for="name" class="label">Name</label>
      <input type="text" id="name" name="name" class="field" placeholder="John">
    </div>
    
    <div class="group">
      <label for="email" class="label">Email</label>
      <input type="email" id="email" name="email" class="field" placeholder="[email protected]">
    </div>
  </fieldset>
  
  <fieldset class="block">
    <legend class="description">Files</legend>
    
    <div class="group">
      <label for="photo" class="label">Photo</label>
      <input type="file" id="photo" name="photo">
    </div>
  </fieldset>
  
  <button type="submit" class="button">Submit</button>
  <button type="reset" class="button">Reset</button>
</form>

CSS

body {
  margin: 0;
  font: 16px 'Segoe UI', Arial, Helvetica, sans-serif;
}

.output {
  max-height: 240px;
  padding: 5px;
  margin: 10px 20px;
  box-sizing: border-box;
  border-radius: 5px;
  font: 12px 'Consolas', monospace;
  background: #222222;
  color: #ffffff;
  tab-size: 4;
  overflow: auto;
}

.output:empty {
  display: none;
}

.form {
  padding: 20px;
}

.block {
  margin-bottom: 10px;
  border: 1px solid #222222;
  border-radius: 5px;
}

.description {
  padding: 0 20px;
}

.group {
  display: flex;
  flex-direction: column;
}

.group:not(:last-child) {
  margin-bottom: 10px;
}

.label {
  margin-bottom: 5px;
}

.field {
  border: none;
  border-bottom: 1px solid #222222;
  font: inherit;
}

.field:focus {
  outline: none;
  box-shadow: 0 1px 0 0 #222222;
}

.button {
  padding: 5px 10px;
  font: inherit;
}

JavaScript

const form = document.querySelector('.form');
const output = document.querySelector('.output');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const formData = new FormData(form);
  const request = new Request('https://httpbin.org/post', {
    method: 'POST',
    body: formData
  });

  const response = await fetch(request);
  const data = await response.json();

  output.textContent = JSON.stringify(data, null, '\t');
});