Forms

Lesson 17 Tailwind CSS

Create professional form inputs and layouts.

Learning approach

Study the Tailwind classes in the example, run the preview, then modify the classes and observe how the design changes.

Tailwind Example

HTML + Tailwind CSS

<form class="max-w-md space-y-4 p-6">

    <input
        type="text"
        placeholder="Full Name"
        class="w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-indigo-600">

    <input
        type="email"
        placeholder="Email Address"
        class="w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-indigo-600">

    <button
        class="w-full rounded-xl bg-slate-900 px-4 py-3 font-semibold text-white">
        Submit
    </button>

</form>