Forms

<form action="#">

  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" name="name" class="form-control" placeholder="Johnny Knoxville">
  </div>

  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" name="email" class="form-control">
  </div>

  <div class="form-group">
    <label for="website">Website</label>
    <input type="url" name="website" class="form-control error" value="My Website">
    <p class="form-hint error">Please enter a valid URL</p>
  </div>

  <div class="form-group">
    <p class="label">Example avatar upload</p>
    <input type="file" id="avatar" name="avatar" class="input-file" data-multiple-caption="{count} files selected" multiple>
    <label for="avatar">
      <svg viewBox="0 0 20 20" width="20" height="20" role="img" aria-labelledby="a164ewtltj6yor16u2f7uevbx92csp89" class="fill-current icon-sm mr-2"><title id="a164ewtltj6yor16u2f7uevbx92csp89">Icons/photo</title>
<path d="M0 4c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm11 9l-3-3-6 6h16l-5-5-2 2zm4-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path></svg>
 <span>Upload Avatar</span>
    </label>
  </div>

  <div class="form-group">
    <label for="industry">Industry</label>
    <div class="relative">
      <select name="industry" class="select">
        <option value="" selected>Choose an industry</option>
        <option value="tech">Tech</option>
        <option value="marketing">Marketing</option>
        <option value="health_science">Health &amp; Science</option>
      </select>
      <div class="caret">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" role="img" aria-labelledby="a67r01kkix33w3rxrqw1o12eyfkpx2wf" class="fill-current h-4 w-4"><title id="a67r01kkix33w3rxrqw1o12eyfkpx2wf">Icons/caret</title><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path></svg>

      </div>
    </div>
  </div>

  <div class="form-group">
    <input type="checkbox" id="checkbox" class="form-checkbox" />
    <label for="checkbox" class="inline-block">Styled checkbox</label>
  </div>
</form>

<form action="#">
  <div class="flex flex-wrap items-center justify-start form-group">
    <label for="name" class="lg:w-1/6 lg:text-right lg:pr-4 lg:mt-2">Name</label>
    <input type="text" name="name" class="form-control lg:flex-1">
  </div>

  <div class="flex flex-wrap items-center justify-start form-group">
    <label for="email" class="lg:w-1/6 lg:text-right lg:pr-4 lg:mt-2">Email</label>
    <input type="email" name="email" class="form-control lg:flex-1">
  </div>

  <div class="flex flex-wrap items-center justify-start form-group">
    <label for="website" class="lg:w-1/6 lg:text-right lg:pr-4 lg:-mt-4">Website</label>
    <div class="w-full lg:flex-1">
      <input type="url" name="website" class="form-control error" value="My Website">
      <p class="w-full form-hint error">Please enter a valid URL</p>
    </div>
  </div>

  <div class="flex flex-wrap items-center justify-start form-group">
    <span class="label lg:w-1/6 lg:text-right lg:pr-4 lg:mt-2">Avatar</span>
    <div class="w-full lg:flex-1">
      <input type="file" id="avatar2" name="avatar2" class="input-file" data-multiple-caption="{count} files selected" multiple>
      <label for="avatar2">
        <svg viewBox="0 0 20 20" width="20" height="20" role="img" aria-labelledby="anw0qked0wwv5yv02nb0czc4ltdfpejs" class="fill-current icon-sm mr-2"><title id="anw0qked0wwv5yv02nb0czc4ltdfpejs">Icons/photo</title>
<path d="M0 4c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm11 9l-3-3-6 6h16l-5-5-2 2zm4-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path></svg>
 <span>Upload Avatar</span>
      </label>
    </div>
  </div>

  <div class="flex flex-wrap items-center justify-start form-group">
    <label for="industry" class="label lg:w-1/6 lg:text-right lg:pr-4 lg:mt-2">Industry</label>
    <div class="relative w-full lg:flex-1">
      <select name="industry" class="select">
        <option value="" selected>Choose an industry</option>
        <option value="tech">Tech</option>
        <option value="marketing">Marketing</option>
        <option value="health_science">Health &amp; Science</option>
      </select>
      <div class="caret">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" role="img" aria-labelledby="aquicim0o91mmwk2ak0984qqk101evov" class="fill-current h-4 w-4"><title id="aquicim0o91mmwk2ak0984qqk101evov">Icons/caret</title><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path></svg>

      </div>
    </div>
  </div>

  <p class="mb-4 text-gray-700 text-sm">Checkboxes labels can be either on the left or right.</p>
  <div class="flex flex-wrap items-center justify-start form-group">
    <label for="admin" class="label lg:w-1/6 lg:text-right lg:pr-4">Admin</label>
    <input type="checkbox" id="admin" class="form-checkbox" />
  </div>

  <div class="flex flex-wrap items-center justify-start form-group">
    <div class="lg:w-1/6 lg:pr-4"></div>
    <input type="checkbox" id="admin2" class="form-checkbox mr-2" />
    <label for="admin2" class="inline-block mb-0">Member</label>
  </div>
</form>