form

This tailwind example is contributed by aditya_sharma, on 07-Sep-2026. Component is made with Tailwind v3.4. It is responsive.

Form

Author aditya_sharma

Tailwind v3.4 42 1

Fork Fullscreen

<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
    <div class="w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-white rounded-2xl shadow-2xl">
      <div class="flex items-center justify-between px-6 py-5 border-b border-gray-200">
        <div>
          <h2 class="text-xl font-semibold text-gray-800">heading</h2>
        </div>

<div>
          <h3 class="text-sm font-semibold text-gray-800 mb-4">fields</h3>

<div class="flex flex-col gap-4">
            <div class="bg-gray-50 rounded-xl p-4">
              <p class="text-xs text-gray-500">field1</p>

<p class="text-lg font-semibold text-gray-800 mt-1">
                field1
              </p>
            </div>

<div class="bg-gray-50 rounded-xl p-4">
              <p class="text-xs text-gray-500">field2</p>

<p class="text-lg font-semibold text-gray-800 mt-1">
field2              </p>
            </div>

<div class="bg-gray-50 rounded-xl p-4">
              <p class="text-xs text-gray-500">field3</p>

<p class="text-sm font-semibold text-gray-800 mt-2">
                field3
              </p>
            </div>

<div class="bg-gray-50 rounded-xl p-4">
              <p class="text-xs text-gray-500">field4</p>
              field4
            </div>
          </div>
        </div>

<div class="flex flex-col-reverse sm:flex-row sm:justify-end gap-3 pt-2">
          <button
            type="button"
            class="w-full sm:w-auto px-5 py-2.5 border bg-blue-600 text-white rounded-xl font-medium hover:bg-blue-700 transition"
          >
            Close
          </button>
        </div>
      </div>
    </div>
  </div>

Related Examples

Forgot password form
Useful form for sending password reset link

Steven Kuhn

4 years ago

22.2k
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Hamza Atig

1 year ago

1.6k
Multi-Step Form with Progress Indicator
reusable "Multi-Step Form with Progress Indicator" component built with HTML, CSS, and Tailwind CSS. It’s a practical component for forms like signups, surveys, or checkout processes.

Ayyamperumal S

1 year ago

2.6k
free tailwind personal portfolio template
free tailwind personal portfolio template

Geoffrey Callaghan

2 years ago

6k
Login
Login form, responsive, no dark-mode for white backgrounds, elegant for any platform

Ameth Galarcio

2 years ago

5.3k
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

ORGIN_DREAMS

1 year ago

1.6k
form text

Severino Victtorino

1 year ago

1.4k
Sign Up Form
A premium responsive sign up page built with pure HTML and Tailwind CSS featuring a split layout, gradient background, social authentication buttons, password strength indicator, trust section, and polished SaaS-style design.

JUGENDRA GANGWAR

1 month ago

95
Feedback Form with rating input
take users feedback with this simple form

Nour Haider

3 years ago

11.5k
Responsive contact us section
responsive contact section

Geoffrey Callaghan

3 years ago

8.1k
User registration form

Laurits

4 years ago

12.2k
Elegant Split-Layout Contact Form (Navy Blue Edition)
Overview: A premium contact section styled in Navy Blue (bg-blue-900) to match the Service Carousel. Key Changes: Palette: Swapped all Teal references for Deep Blue (bg-blue-900 panel, text-blue-700 accents). Interactivity: Focus rings on inputs now glow with a soft blue (focus:ring-blue-600/10). Consistency: Maintains the "DM Serif Display" typography and "blob" background effects (now in blue/indigo) for a cohesive high-end look.

Juan D. Cortorreal

11 months ago

778