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

Maintenance page

Author:
Faye

1 year ago

2.1k
Upvote downvote buttons [alpine]
upvote and downvote buttons made as working version in alpine.js

Author:
Anonymous

2 years ago

9.2k
Content Discovery Platform with Search & Filter
A modern, responsive web application built with Tailwind CSS that showcases content cards with search and filter functionality.

Author:
Sufyan jutt

4 months ago

326
Custom Audio Player
🎧 Custom Audio Player (HTML, Tailwind CSS & Alpine.js) A modern, responsive custom audio player built with Tailwind CSS and Alpine.js, designed for a smooth user experience and elegant visuals in both light and dark mode. ✨ Features: 🎵 Play, pause, and mute/unmute controls 📈 Interactive progress bar with seek functionality 🔊 Dynamic volume slider with live preview 🖼️ Album art and track details display ⌨️ Keyboard support — toggle play/pause with the spacebar 🌓 Fully responsive and dark-mode compatible This player uses minimal JavaScript, relying on Alpine.js for reactivity, and can be easily customized or integrated into any web project. Perfect for portfolios, podcasts, or music web apps.

Author:
wavy kits

5 months ago

749
Cafee shop
help to buy something that can help you to relax

Author:
INGRIDE MUZIRANENGE

9 months ago

1.3k
baseball bros
baseball

Author:
Abel Wright

3 weeks ago

169
Plant Game
Checking to see if it works

Author:
Becky Keyworth

10 months ago

934
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

11 months ago

451
chat bar
live chat

Author:
gidy

9 months ago

1.3k
responsive home page
the best home page

Author:
irahoza daniel

9 months ago

1.2k
Product hunt showcase

Author:
Lukas Müller

3 years ago

12.4k
Certificate of Completion
A clean and modern certificate template built with Tailwind CSS. Ideal for courses, training programs, and professional achievements.

Author:
Ramkesh Gupta

5 months ago

265

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components