Form Inline Validation

<section class="ws-forms bg-[var(--ws-forms-bg)]">
  <div class="mx-auto max-w-2xl px-4 py-10 sm:px-6 lg:px-8">
    <form class="rounded-2xl border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-bg)] p-6 shadow-sm">
      <div>
        <h2 class="text-lg font-semibold text-[var(--ws-forms-text)]">Create team member</h2>
        <p class="mt-1 text-sm text-[var(--ws-forms-label)]">Inline validation helps fast entry without sending the user to a separate error summary.</p>
      </div>
      <div class="mt-6 space-y-5">
        <div>
          <label for="member-name" class="block text-sm font-medium text-[var(--ws-forms-text)]">Full name</label>
          <input id="member-name" type="text" value="Maya Chen" class="mt-1.5 w-full rounded-xl border border-emerald-300 px-3 py-2.5 text-sm text-[var(--ws-forms-text)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-forms-input-focus)]/15" />
          <p class="mt-1 text-sm text-emerald-700">Looks good.</p>
        </div>
        <div>
          <label for="member-email" class="block text-sm font-medium text-[var(--ws-forms-text)]">Work email</label>
          <input id="member-email" type="email" value="maya@" aria-invalid="true" class="mt-1.5 w-full rounded-xl border border-rose-300 px-3 py-2.5 text-sm text-[var(--ws-forms-text)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-forms-input-focus)]/15" />
          <p class="mt-1 text-sm text-rose-700">Enter a complete work email address.</p>
        </div>
        <div>
          <label for="member-role" class="block text-sm font-medium text-[var(--ws-forms-text)]">Role</label>
          <div class="relative">
            <select id="member-role" class="mt-1.5 w-full appearance-none rounded-xl border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-3 pr-10 py-2.5 text-sm text-[var(--ws-forms-text)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-forms-input-focus)]">
              <option>Editor</option>
              <option>Admin</option>
              <option>Support</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
              <svg class="h-4 w-4 text-[var(--ws-forms-label)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>
            </div>
          </div>
          <p class="mt-1 text-sm text-[var(--ws-forms-label)]">Use Admin only if this person should manage billing and members.</p>
        </div>
      </div>
      <div class="mt-6 flex justify-end gap-3">
        <button type="button" class="rounded-xl border border-[var(--ws-forms-input-border)] px-4 py-2.5 text-sm font-medium text-[var(--ws-forms-text)]">Cancel</button>
        <button type="submit" class="rounded-xl bg-[var(--ws-forms-action-bg)] px-4 py-2.5 text-sm font-semibold text-[var(--ws-forms-action-text)]">Invite member</button>
      </div>
    </form>
  </div>
</section>