Forms

Styling Forms with Tailwind

Form inputs need careful styling for usability:

<input
  type="email"
  class="w-full border border-gray-300 rounded-lg px-4 py-2
         focus:outline-none focus:ring-2 focus:ring-blue-500"
  placeholder="Email"
>

Key input classes:

• w-full — full width
• border border-gray-300 — subtle border
• rounded-lg — rounded corners
• px-4 py-2 — comfortable padding
• focus:outline-none — remove default browser focus ring
• focus:ring-2 focus:ring-blue-500 — custom focus indicator

Labels:

<label class="block text-sm font-medium text-gray-700 mb-1">
  Email address
</label>

Grouping fields:

<div class="space-y-4">
  <div>
    <label ...>Name</label>
    <input ...>
  </div>
</div>

Your Task

Create a sign-in form with email + password inputs using focus ring styles, and a submit button.