Home
Michael Andreuzza
Multi step form with tailwindcss and alpinejs

Multi step form with tailwindcss and alpinejs

This tailwind example is contributed by Michael Andreuzza, on 01-May-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Services,Why choose us

Feature showcase

Author Michael Andreuzza

2.6k

7

Fork Fullscreen

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<section class="bg-white relative overflow-hidden">
 <div class="w-full mx-auto 2xl:max-w-7xl flex flex-col justify-center py-24 relative p-8">
  <div class="max-w-xl mx-auto">
   <div class="prose text-gray-500 prose-sm prose-headings:font-normal prose-headings:text-xl mx-auto max-w-sm w-full">
    <div>
     <h1>Multi step form</h1>
     <p class="text-balance">Fill in the form to see how it works.</p>
    </div>
   </div> 
   <div class="mt-6 border-t pt-12">
    <div x-data="{ step: 1, formData: { name: '', email: '', username: '', password: '' } }" class="rounded-3xl bg-white shadow-2xl border p-8 lg:p-10 mt-6">
     
     <div x-show="step === 1">
      <h2 class="text-lg font-medium text-gray-500">
       Step 1: Personal Information
      </h2>
      <div class="space-y-2 mt-12"> <label for="name" class="block text-sm text-gray-700">Name</label> <input type="text" id="name" x-model="formData.name" class="block w-full h-12 px-4 py-3 placeholder-gray-500 bg-gray-100 border-0 rounded-lg appearance-none text-blue-500 focus:border-blue-500 focus:bg-white focus:outline-none focus:ring-blue-500 focus:ring-inset focus:ring-2 text-xs" placeholder="Enter your name"> </div>
      <div class="space-y-2 mt-4"> <label for="email" class="block mb-2">Email</label> <input type="email" id="email" x-model="formData.email" class="block w-full h-12 px-4 py-3 placeholder-gray-500 bg-gray-100 border-0 rounded-lg appearance-none text-blue-500 focus:border-blue-500 focus:bg-white focus:outline-none focus:ring-blue-500 focus:ring-inset focus:ring-2 text-xs" placeholder="Enter your email"> </div>
      <div class="mt-4"> <button class="rounded-full bg-blue-600 px-8 py-2 h-12 text-sm font-semibold text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 w-full" @click="step++">Next</button> </div>
     </div> 
     <div x-show="step === 2" style="display: none;">
      <h2 class="text-lg font-medium text-gray-500 mb-4">
       Step 2: Account Information
      </h2>
      <div class="space-y-2 mt-12"> <label for="username" class="block mb-2">Username</label> <input type="text" id="username" x-model="formData.username" class="block w-full h-12 px-4 py-3 placeholder-gray-500 bg-gray-100 border-0 rounded-lg appearance-none text-blue-500 focus:border-blue-500 focus:bg-white focus:outline-none focus:ring-blue-500 focus:ring-inset focus:ring-2 text-xs" placeholder="Choose a username"> </div>
      <div class="space-y-2 mt-4"> <label for="password" class="block mb-2">Password</label> <input type="password" id="password" x-model="formData.password" class="block w-full h-12 px-4 py-3 placeholder-gray-500 bg-gray-100 border-0 rounded-lg appearance-none text-blue-500 focus:border-blue-500 focus:bg-white focus:outline-none focus:ring-blue-500 focus:ring-inset focus:ring-2 text-xs" placeholder="Enter your password"> </div>
      <div class="mt-4 flex flex-wrap gap-2"> <button class="rounded-full bg-blue-50 px-8 py-2 h-12 text-sm font-semibold text-blue-600 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 w-full" @click="step--">Previous</button> <button class="rounded-full bg-blue-600 px-8 py-2 h-12 text-sm font-semibold text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 w-full" @click="step++">Next</button> </div>
     </div> 
     <div x-show="step === 3" style="display: none;">
      <h2 class="text-lg font-medium text-gray-500">
       Step 3: Confirmation
      </h2>
      <div class="mt-12 space-y-4 font-medium text-sm text-gray-500">
       <p>
        Name: <span x-text="formData.name"></span> </p>
       <p>
        Email: <span x-text="formData.email"></span> </p>
       <p>
        Username: <span x-text="formData.username"></span> </p>
      </div> 
      <div class="mt-4 flex flex-wrap gap-2"> <button class="rounded-full bg-blue-50 px-8 py-2 h-12 text-sm font-semibold text-blue-600 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 w-full" @click="step--">Previous</button> <button class="rounded-full bg-blue-600 px-8 py-2 h-12 text-sm font-semibold text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 w-full">Submit</button> </div>
     </div>
    </div>
   </div> 
   
   <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2">
    <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-xl border">
     <div class="flex w-0 flex-1 items-center p-4">
      <div class="w-full">
       <p class="text-sm font-medium text-neutral-900">Tutorial</p>
       <p class="mt-1 text-sm text-neutral-500">
        How to create a multistep form with Tailwind CSS and Alpinejs
       </p>
       <p class="mt-2 text-xs text-orange-600 underline"> <a href="https://lexingtonthemes.com">
         by © Lexington Themes</a> </p>
      </div>
     </div>
     <div class="flex">
      <div class="flex flex-col divide-y divide-neutral-200">
       <div class="flex h-0 flex-1"> <a href="https://lexingtonthemes.com/tutorials/how-to-create-a-multistep-form-with-tailwind-css-and-alpinejs/" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-600">Tutorial</a> </div>
       <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/multistep/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-600">Get the code</a> </div>
      </div>
     </div>
    </div>
   </div> 
  </div>
 </div>
</section>

Related Examples

Feature Section
A section that allows you to share features about your product and an example of your product

Author:
Andrew Weisbeck

1 year ago

2.4k
Products Layout
An ecommerce store front product list layout

Author:
Developer Kwame

3 months ago

510
Feature Showcase
The feature showcase's responsive grid can also be used as testimonial cards.

Author:
Alok

3 years ago

25.5k
free tailwind personal portfolio template
free tailwind personal portfolio template

Author:
Geoffrey Callaghan

1 year ago

5.3k
Feature showcase with images

Author:
Amit Pachange

2 years ago

13.9k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

3.4k
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

6 months ago

424
Feature cards

Author:
Fagundo67

2 years ago

11k
Responsive Card Grid with hover animation

Author:
Prashant

3 years ago

19.8k
Employee Data Management System TailwindCSS,Html
This project is made of only html and even tailwind is using CDN to save storage space. Best for SPA and routing with other components .

Author:
Siva Naga Malleswararao Kurakula

11 months ago

1.4k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Author:
Ayyamperumal S

1 week ago

136
Product feature showccase section with images

Author:
R.P Ketan

2 years ago

16.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12