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 36

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

Reset Password UI
Reset password screen built with pure HTML and Tailwind CSS. Includes new password and confirm password fields, password strength indicator, security requirements checklist, inline SVG icons, and a premium glassmorphism SaaS interface.

JUGENDRA GANGWAR

3 weeks ago

79
update user
it is the layout for creating an event

seth dridi

2 years ago

2.4k
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
Multi-Step Form with Progress Tracker
sleek and interactive multi-step registration form built with Tailwind CSS and Alpine.js, perfect for onboarding users through a smooth, step-by-step experience. This component enhances user engagement with animated transitions, real-time validation, and a dynamic progress bar that visually tracks completion. It’s fully responsive, dark-mode ready, and ideal for modern SaaS applications, startup landing pages, or authentication systems. ✨ Key Features 🪜 Three-step flow: Personal Info → Account Setup → Preferences ⚡ Real-time field validation with instant feedback 🔒 Password visibility toggles for better UX 📈 Progress bar tracker with smooth animations ✅ Success confirmation with user details preview 🌙 Dark mode support for modern UI design 💨 Alpine.js-powered interactivity – no external JS frameworks needed 📱 Fully responsive design optimized for all devices 💡 Perfect for: SaaS or startup registration flows Onboarding or sign-up pages Form builders, dashboard templates, or web app UIs UI component libraries & code snippets collections

wavy kits

1 year ago

1.3k
3D login form and responsive designe
Made a resposnvie form and 3d animation

Sufyan jutt

8 months ago

519
Profile Form
Enhanced User Profile Form with Stunning Profile and Cover Image Fields

Steve NGOYA

1 year ago

1.6k
Feedback form
Collect opinions about your company's service

Arya

4 years ago

14.7k
Simple Sign up form
A responsive simple singup or login form

Emdadul Islam

2 years ago

3k
Responsive contact us section
responsive contact section

Geoffrey Callaghan

2 years ago

8.1k
Login Form with Icon

Prashant

4 years ago

18.9k
Glassmorphism form

Sophia Baker

3 years ago

19.3k
Sign up form
simple full-height register form

Lukas Müller

3 years ago

13.6k