Home
Tanvir Hasan Bappy (Tanvir)
Responsive Multi-Step Registration

Responsive Multi-Step Registration

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

Other

Author Tanvir Hasan Bappy (Tanvir)

1.7k

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

Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Author:
Coastal UI

10 months ago

1.4k
Dark dashboard
Dark dashboard

Author:
Tanvir Hasan Bappy (Tanvir)

1 month ago

67
Pricing Plans

Author:
ariaw

4 months ago

503
Forgot Password
Forgot Password

Author:
Tanvir Hasan Bappy (Tanvir)

1 month ago

103
Ethical Fashion

Author:
Tanvir Hasan Bappy (Tanvir)

11 months ago

1.1k
ServerHub Interface

Author:
МОЙДОЫР

2 months ago

639
htmlcss2

Author:
Elsa Khan

7 months ago

240
Invoice Generator
Invoice Generator

Author:
Tanvir Hasan Bappy (Tanvir)

1 month ago

95
Skill Cards with Tailwind CSS
A responsive and modern card section designed with Tailwind CSS to showcase professional skills. Each card features a smooth fade-in animation and hover scaling effect for an engaging user experience. Ideal for portfolio websites, developer profiles, and personal branding pages. Fully customizable and mobile-friendly.

Author:
irahoza daniel

8 months ago

624
Resizable container
Resizable container

Author:
Ganesh Salunke

1 month ago

33
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.

Author:
Hamza Atig

9 months ago

1.1k
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

842

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components