Responsive Multi-Step Registration

This tailwind example is contributed by Tanvir Hasan Bappy (Tanvir), on 23-Nov-2024. Component is made with Tailwind v3.4. It is responsive.

Other

Author Tanvir Hasan Bappy (Tanvir)

Tailwind v3.4 2.4k 7

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
    
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Multi-Step Registration</title>

<div id="stepContent1" class="step-content">
      <h2 class="text-lg md:text-2xl font-semibold mb-4">Personal Info</h2>
      <form id="formStep1">
        <div class="mb-4">
          <label class="block text-gray-700 text-sm md:text-base">Full Name</label>
          <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#106C4F]" placeholder="John Doe">
        </div>
        <div class="mb-4">
          <label class="block text-gray-700 text-sm md:text-base">Email</label>
          <input type="email" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#106C4F]" placeholder="john@example.com">
        </div>
      </form>
    </div>

<div id="stepContent2" class="step-content hidden">
      <h2 class="text-lg md:text-2xl font-semibold mb-4">Account Details</h2>
      <form id="formStep2">
        <div class="mb-4">
          <label class="block text-gray-700 text-sm md:text-base">Username</label>
          <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#106C4F]" placeholder="username123">
        </div>
        <div class="mb-4">
          <label class="block text-gray-700 text-sm md:text-base">Password</label>
          <input type="password" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#106C4F]" placeholder="••••••••">
        </div>
      </form>
    </div>

<div id="stepContent3" class="step-content hidden">
      <h2 class="text-lg md:text-2xl font-semibold mb-4">Confirmation</h2>
      <p class="text-gray-700 text-sm md:text-base">Please review your details and click "Submit" to complete your registration.</p>
    </div>

<div class="flex justify-between mt-6">
      <button id="prevButton" class="px-4 py-2 bg-gray-300 text-gray-700 rounded disabled:opacity-50 disabled:cursor-not-allowed transition duration-300" disabled>Previous</button>
      <button id="nextButton" class="px-4 py-2 bg-[#106C4F] text-white rounded transition duration-300 hover:bg-[#106C4F]">Next</button>
    </div>
  </div>
  </div>

const prevButton = document.getElementById("prevButton");
    const nextButton = document.getElementById("nextButton");

// Show/Hide step content
      stepContents.forEach((content, index) => {
        const contentElement = document.getElementById(content);
        contentElement.classList.toggle("hidden", index !== currentStep);
      });

// Update button states
      prevButton.disabled = currentStep === 0;
      nextButton.textContent = currentStep === steps.length - 1 ? "Submit" : "Next";
    }

prevButton.addEventListener("click", () => {
      if (currentStep > 0) currentStep--;
      updateStep();
    });

nextButton.addEventListener("click", () => {
      if (currentStep < steps.length - 1) {
        currentStep++;
        updateStep();
      } else {
        alert("Registration Complete!");
      }
    });

updateStep();
  </script>
</body>
</html>

Related Examples

Card KPI
Targetas ahora con un grafico

Raul antonio de la cruz hernandez

10 months ago

1.1k
Tailwind CSS Navbar
Logo on the left. Main menu with a mega menu under "Services". Responsive design with a hamburger menu for mobile devices. Mega menu appears on hover for desktop and toggles on click for mobile.

KULDEEP

1 year ago

1.9k
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Ameth Galarcio

1 year ago

2.9k
Interactive Game Flip Card – Pure HTML & CSS Component
An elegant and interactive game info flip card built purely with HTML and CSS. This component flips smoothly on hover to reveal detailed game information on the back, providing a modern and engaging way to showcase your games without using JavaScript. Perfect for gaming websites wanting sleek animations and clean design.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.7k
Table CRUD
CRUD TABLE DESIGN

Abhiraj

1 year ago

5k
Feeds
This is a responsive social media feed interface built with Tailwind CSS that features a clean, modern design with excellent color contrast and visual hierarchy. Here's a detailed breakdown of its components and layout:

ishimwe shadad

1 year ago

1.5k
Car booking form
Rental carr booking form to rent a car online

ehmasuk

10 months ago

865
blockquote

Freja Jensen

3 years ago

10.6k
Life Tree
by salvator

Baraka Salvator

1 year ago

1.3k
Our features
Our features

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.9k
Interactive 3D Morphing Globe - Sphere to Star
3D interactive particle globe that morphs between a sphere and a star shape. Features custom glassmorphism UI, click-to-pulse bloom effects, and dynamic color themes. Built by Mostafa Niloy (Visernic Limited) using Three.js and Tailwind CSS.

Visernic

3 months ago

429
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Hamza Atig

1 year ago

1.7k