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

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

portfolio
This portfolio page for Claire includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support (the design is already dark-themed) 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections 2. Animated skill bars 3. Hover effects on projects and buttons 4. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Skills, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a frosted glass effect using backdrop filters - Text is white for high contrast against the dark background - Sections fade in and slide up as they enter the viewport - Skill bars animate when the skills section is in view - Project cards have a hover effect with scaling and increased opacity - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.

Author:
nejaa badr

1 year ago

2.2k
visacardes
I'll create professional Visa card components with realistic styling and multiple card types

Author:
ishimwe prince

7 months ago

971
Ethical Fashion

Author:
Tanvir Hasan Bappy (Tanvir)

10 months ago

1.1k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

1 year ago

3.5k
Lots of button examples
tailwind button examples

Author:
QQ-VVN

7 months ago

468
Show user details

Author:
Lucas Martinez

2 years ago

25.3k
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

8 months ago

1.1k
Ai clone, chat ui
Chat interface for ai builder, dont toomuch focused on designing responsive

Author:
Abhiraj

11 months ago

1.8k
Table CRUD
CRUD TABLE DESIGN

Author:
Abhiraj

10 months ago

3.4k
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

5 months ago

402
Customer support chatbox
Floating chatbox

Author:
gmer33

2 years ago

11.6k
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Author:
Abhiraj

11 months ago

2.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components