<div class="space-y-4">
  <div>
    <label class="mb-1 block text-caption font-medium text-label-primary">
      Naam
    </label>
    <input
      type="text"
      class="w-full rounded-s border border-outline-strong bg-surface-primary
             px-3 py-2 text-body text-label-primary
             placeholder:text-label-tertiary
             focus:border-outline-active focus:outline-none focus:ring-1 focus:ring-outline-active"
      placeholder="Je naam"
    />
  </div>
 
  <div>
    <label class="mb-1 block text-caption font-medium text-label-primary">
      Email
    </label>
    <input
      type="email"
      class="w-full rounded-s border border-outline-strong bg-surface-primary
             px-3 py-2 text-body text-label-primary
             placeholder:text-label-tertiary
             focus:border-outline-active focus:outline-none focus:ring-1 focus:ring-outline-active"
      placeholder="je@email.nl"
    />
  </div>
</div>

<div>
  <label class="mb-1 block text-caption font-medium text-label-primary">
    Email
  </label>
  <input
    type="email"
    aria-invalid="true"
    aria-describedby="email-error"
    class="w-full rounded-s border border-label-critical bg-surface-primary
           px-3 py-2 text-body text-label-primary
           focus:outline-none focus:ring-1 focus:ring-label-critical"
  />
  <p id="email-error" class="mt-1 text-caption text-label-critical">
    Voer een geldig e-mailadres in.
  </p>
</div>