JSFiddle - React, Tailwind, and code Playground

by Angelos Chaidas

HTML

<form action="/apply" method="post">
  <fieldset>
    <legend>Job application form</legend>

    <div>
      <label for="full-name">Full name</label>
      <input
        id="full-name"
        name="full_name"
        type="text"
        autocomplete="name"
        required
        aria-required="true"
      />
    </div>

    <div>
      <label for="email">Email address</label>
      <input
        id="email"
        name="email"
        type="email"
        autocomplete="email"
        required
        aria-required="true"
      />
    </div>

    <div>
      <label for="location">Location</label>
      <input
        id="location"
        name="location"
        type="text"
        autocomplete="address-level2"
        required
        aria-required="true"
      />
    </div>

    <fieldset>
      <legend>Job type preference</legend>
      <div>
        <input
          id="job-type-fulltime"
          name="job_type"
          type="radio"
          value="full_time"
          required
          aria-required="true"
        />
        <label for="job-type-fulltime">Full-time</label>
      </div>
      <div>
        <input
          id="job-type-parttime"
          name="job_type"
          type="radio"
          value="part_time"
        />
        <label for="job-type-parttime">Part-time</label>
      </div>
      <div>
        <input
          id="job-type-contract"
          name="job_type"
          type="radio"
          value="contract"
        />
        <label for="job-type-contract">Contract</label>
      </div>
      <div>
        <input
          id="job-type-internship"
          name="job_type"
          type="radio"
          value="internship"
        />
        <label for="job-type-internship">Internship</label>
      </div>
    </fieldset>

    <fieldset>
      <legend>Work setup preferences (required)</legend>
      <div>
        <input
         ...