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.4k

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

Date picker
Date picker example using flatpickr library

Author:
Lîmåã M

2 years ago

16.9k
Enhanced Student Testimonials Section
A modern, interactive testimonials section featuring glassmorphism design, floating animations, and social proof elements. Includes star ratings, course badges, user profiles with online status indicators, and a stats section. Built with Tailwind CSS and features gradient backgrounds, hover effects, and responsive design optimized for showcasing student success stories and building credibility.

Author:
Muhammad Umair Arshad

3 months ago

458
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Author:
Ranit Saha

10 months ago

1.7k
News feed

Author:
Bunny

2 years ago

13.5k
Glassmorphism form

Author:
Geoffrey Callaghan

2 years ago

6.6k
Typewriter effect in tailwindcss with this simple trick
source: https://dev.to/lazysock/make-a-typewriter-effect-with-tailwindcss-in-5-minutes-dc

Author:
Anonymous

2 years ago

11.5k
Privacy policy page template

Author:
Sameer Sultana

2 years ago

18.7k
5 Different Style of Button
Gradient Button outline button neon button Sliding Background pulsing Button

Author:
KULDEEP

4 months ago

349
image

Author:
pablitodgb

5 months ago

342
Maintenance page template
The site is under maintenance placeholder page

Author:
Anonymous

1 year ago

10k
Verify OTP
verification code

Author:
gidy

6 months ago

459
Recipe Card
beautiful recipe component with image and step-by-step instructions

Author:
Anonymous

2 years ago

7.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components