Search Components

Registration Form

Form for creating new user accounts

Registration Form Component

A responsive and visually appealing registration form component designed for CRM/Business Tools, featuring a triadic color scheme and subtle microinteractions, with full dark mode support.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 dark:from-slate-900 dark:via-gray-950 dark:to-zinc-950 p-4 sm:p-8 flex items-center justify-center font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 ease-in-out hover:scale-[1.01] dark:shadow-xl dark:shadow-blue-900/20">
    <div class="px-6 py-8 sm:px-8 sm:py-10">
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2 text-center">
        Join Our Community
      </h2>
      <p class="text-center text-sm text-gray-600 dark:text-gray-400 mb-8">
        Create your account to unlock powerful CRM tools.
      </p>

      <form class="space-y-6">
        <div>
          <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full Name</label>
          <input type="text" id="full-name" name="full-name" placeholder="John Doe" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 ease-in-out
                   bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500
                   hover:border-blue-400 dark:hover:border-blue-600 focus:shadow-md">
        </div>

        <div>
          <label for="email-address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
          <input type="email" id="email-address" name="email" placeholder="[email protected]" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-pink-500 transition-all duration-200 ease-in-out
                   bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500
                   hover:border-pink-400 dark:hover:border-pink-600 focus:shadow-md">
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
          <input type="password" id="password" name="password" placeholder="At least 8 characters" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200 ease-in-out
                   bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500
                   hover:border-purple-400 dark:hover:border-purple-600 focus:shadow-md">
        </div>

        <div class="relative flex items-start">
          <div class="flex items-center h-5">
            <input id="terms" name="terms" type="checkbox" required
              class="focus:ring-blue-500 h-4 w-4 text-blue-600 dark:text-blue-500 border-gray-300 dark:border-gray-600 rounded transform transition-all duration-200 ease-in-out
                     dark:bg-gray-700 dark:checked:bg-blue-600 dark:checked:border-blue-600 opacity-90 hover:opacity-100
                     focus:scale-110">
          </div>
          <div class="ml-3 text-sm">
            <label for="terms" class="font-medium text-gray-700 dark:text-gray-300">
              I agree to the <a href="#" class="text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400 font-semibold underline-offset-2 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-sm">Terms of Service</a> and <a href="#" class="text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400 font-semibold underline-offset-2 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-sm">Privacy Policy</a>.
            </label>
          </div>
        </div>

        <div>
          <button type="submit"
            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-md text-lg font-semibold text-white
                   bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 
                   hover:from-purple-700 hover:via-pink-700 hover:to-blue-700 
                   focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800
                   transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95
                   relative overflow-hidden group">
            <span class="relative z-10">Register</span>
            <span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
          </button>
        </div>
      </form>

      <div class="mt-8 text-center">
        <p class="text-sm text-gray-600 dark:text-gray-400">
          Already have an account?
          <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400 ml-1 underline-offset-2 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-sm">
            Sign In
          </a>
        </p>
      </div>
    </div>
  </div>
</div>

A responsive registration form component with a skeuomorphic design, muted color scheme, and dark mode support, suitable for travel and tourism websites. It mimics real-world elements like embossed buttons and recessed input fields.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 font-sans">
  <div class="w-full max-w-lg bg-gray-100 dark:bg-gray-700 rounded-3xl shadow-xl p-8 transform transition-all duration-300 ease-in-out
              dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.6),_inset_0_-2px_4px_rgba(255,255,255,0.05),_0_8px_16px_rgba(0,0,0,0.5)]
              shadow-[inset_0_2px_4px_rgba(255,255,255,0.8),_inset_0_-2px_4px_rgba(0,0,0,0.1),_0_8px_16px_rgba(0,0,0,0.2)]">
    <h2 class="text-3xl font-extrabold text-gray-700 dark:text-gray-200 mb-8 text-center drop-shadow-sm">
      <span class="block">Embark on Your Journey</span>
      <span class="block text-sm font-normal text-gray-500 dark:text-gray-400 mt-2">Register for an unforgettable experience</span>
    </h2>

    <form class="space-y-6">
      <div>
        <label for="full-name" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Full Name</label>
        <input type="text" id="full-name" name="full-name" placeholder="John Doe" autocomplete="name"
               class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
                      bg-gray-200 dark:bg-gray-800 shadow-inner
                      shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
                      dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
                      transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
               aria-label="Full Name">
      </div>

      <div>
        <label for="email" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Email Address</label>
        <input type="email" id="email" name="email" placeholder="[email protected]" autocomplete="email"
               class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
                      bg-gray-200 dark:bg-gray-800 shadow-inner
                      shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
                      dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
                      transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
               aria-label="Email Address">
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Password</label>
        <input type="password" id="password" name="password" placeholder="••••••••"
               class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
                      bg-gray-200 dark:bg-gray-800 shadow-inner
                      shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
                      dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
                      transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
               aria-label="Password">
      </div>

      <div>
        <label for="confirm-password" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Confirm Password</label>
        <input type="password" id="confirm-password" name="confirm-password" placeholder="••••••••"
               class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
                      bg-gray-200 dark:bg-gray-800 shadow-inner
                      shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
                      dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
                      transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
               aria-label="Confirm Password">
      </div>

      <div class="relative flex items-start">
        <div class="flex items-center h-5">
          <input id="terms" name="terms" type="checkbox"
                 class="focus:ring-blue-500 h-5 w-5 text-blue-600 rounded drop-shadow-sm
                        bg-gray-200 dark:bg-gray-800 border-gray-300 dark:border-gray-600
                        shadow-[inset_0_1px_2px_rgba(0,0,0,0.1),_inset_0_-1px_2px_rgba(255,255,255,0.6)]
                        dark:shadow-[inset_0_1px_2px_rgba(0,0,0,0.7),_inset_0_-1px_2px_rgba(255,255,255,0.05)]
                        appearance-none checked:bg-blue-500 checked:border-transparent cursor-pointer
                        transition-all duration-200 ease-in-out">
          <div class="absolute w-5 h-5 flex items-center justify-center pointer-events-none">
            <svg class="h-4 w-4 text-white opacity-0 transform scale-0 transition-all duration-200 ease-in-out pointer-events-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="20 6 9 17 4 12"></polyline>
            </svg>
          </div>
        </div>
        <div class="ml-3 text-sm">
          <label for="terms" class="font-medium text-gray-700 dark:text-gray-300 drop-shadow-sm">
            I agree to the <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-400 rounded-md transition duration-200">Terms and Conditions</a>
          </label>
        </div>
      </div>

      <div>
        <button type="submit"
                class="w-full flex justify-center py-3 px-6 border border-transparent rounded-2xl text-lg font-bold text-white
                       bg-blue-500 dark:bg-blue-600 hover:bg-blue-600 dark:hover:bg-blue-700
                       focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400
                       shadow-xl
                       shadow-[0_4px_8px_rgba(0,0,0,0.2),_inset_0px_2px_4px_rgba(255,255,255,0.4),_inset_0px_-2px_4px_rgba(0,0,0,0.2)]
                       dark:shadow-[0_4px_8px_rgba(0,0,0,0.6),_inset_0px_2px_4px_rgba(255,255,255,0.1),_inset_0px_-2px_4px_rgba(0,0,0,0.4)]
                       active:shadow-inner active:bg-blue-700 dark:active:bg-blue-800
                       transform active:scale-98 transition-all duration-200 ease-in-out drop-shadow-sm">
          Register Now
        </button>
      </div>
    </form>
  </div>
</div>

<style>
  /* Custom style for the checkbox checkmark animation */
  input[type='checkbox']:checked + div > svg {
    opacity: 1;
    transform: scale(1);
  }
</style>

Registration Form Component

A responsive registration form component with a 3D design aesthetic, incorporating sepia/brown tones, suitable for social media applications. It supports dark mode and utilizes semantic HTML for accessibility.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-stone-200 via-stone-100 to-stone-200 dark:from-stone-900 dark:via-stone-950 dark:to-stone-900 py-12 px-4 sm:px-6 lg:px-8 flex items-center justify-center font-sans">
  <div class="max-w-md w-full relative group perspective-1000">
    <!-- Front of the 3D card -->
    <div class="transform-style-preserve-3d transition-transform duration-700 ease-in-out group-hover:rotate-y-180 backface-hidden rounded-2xl shadow-xl border border-stone-300 dark:border-stone-700 p-8 space-y-8 bg-gradient-to-br from-stone-50 via-stone-100 to-stone-50 dark:from-stone-800 dark:via-stone-900 dark:to-stone-800">
      <div class="text-center">
        <h2 class="mt-6 text-3xl font-extrabold text-stone-800 dark:text-stone-100 drop-shadow-sm">
          Join Our Social Network
        </h2>
        <p class="mt-2 text-sm text-stone-600 dark:text-stone-400">
          Create your profile and connect with friends!
        </p>
      </div>
      <form class="mt-8 space-y-6" action="#" method="POST">
        <input type="hidden" name="remember" value="true">
        <div class="rounded-md shadow-sm -space-y-px">
          <div>
            <label for="username" class="sr-only">Username</label>
            <input id="username" name="username" type="text" autocomplete="username" required
              class="appearance-none rounded-t-md relative block w-full px-3 py-3 border border-stone-300 dark:border-stone-700 placeholder-stone-500 dark:placeholder-stone-400 text-stone-900 dark:text-stone-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 focus:z-10 text-sm bg-stone-100 dark:bg-stone-700 transition duration-200 ease-in-out transform translate-z-10 focus:translate-z-20"
              placeholder="Username">
          </div>
          <div>
            <label for="email-address" class="sr-only">Email address</label>
            <input id="email-address" name="email" type="email" autocomplete="email" required
              class="appearance-none rounded-none relative block w-full px-3 py-3 border border-stone-300 dark:border-stone-700 placeholder-stone-500 dark:placeholder-stone-400 text-stone-900 dark:text-stone-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 focus:z-10 text-sm bg-stone-100 dark:bg-stone-700 transition duration-200 ease-in-out transform translate-z-10 focus:translate-z-20"
              placeholder="Email address">
          </div>
          <div>
            <label for="password" class="sr-only">Password</label>
            <input id="password" name="password" type="password" autocomplete="new-password" required
              class="appearance-none rounded-b-md relative block w-full px-3 py-3 border border-stone-300 dark:border-stone-700 placeholder-stone-500 dark:placeholder-stone-400 text-stone-900 dark:text-stone-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 focus:z-10 text-sm bg-stone-100 dark:bg-stone-700 transition duration-200 ease-in-out transform translate-z-10 focus:translate-z-20"
              placeholder="Password">
          </div>
        </div>

        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox"
              class="h-4 w-4 text-amber-600 focus:ring-amber-500 border-stone-300 dark:border-stone-700 rounded bg-stone-200 dark:bg-stone-800 transform translate-z-10">
            <label for="remember-me" class="ml-2 block text-sm text-stone-900 dark:text-stone-200">
              Remember me
            </label>
          </div>

          <div class="text-sm">
            <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400 transform translate-z-10">
              Forgot your password?
            </a>
          </div>
        </div>

        <div>
          <button type="submit"
            class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-gradient-to-br from-amber-600 to-amber-700 hover:from-amber-700 hover:to-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-stone-900 shadow-lg shadow-amber-500/30 dark:shadow-amber-700/30 transition duration-300 ease-in-out transform translate-z-10 hover:translate-z-20 hover:scale-105 active:scale-95 active:translate-z-5">
            <span class="absolute left-0 inset-y-0 flex items-center pl-3">
              <!-- Heroicon name: solid/lock-closed -->
              <svg class="h-5 w-5 text-amber-300 group-hover:text-amber-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
              </svg>
            </span>
            Sign Up
          </button>
        </div>
      </form>
    </div>

    <!-- Back of the 3D card -->
    <div class="transform-style-preserve-3d transition-transform duration-700 ease-in-out rotate-y-180 backface-hidden absolute inset-0 rounded-2xl shadow-xl border border-stone-300 dark:border-stone-700 p-8 space-y-8 bg-gradient-to-bl from-stone-50 via-stone-100 to-stone-50 dark:from-stone-800 dark:via-stone-900 dark:to-stone-800">
      <div class="text-center">
        <h2 class="mt-6 text-3xl font-extrabold text-stone-800 dark:text-stone-100 drop-shadow-sm">
          Welcome Back!
        </h2>
        <p class="mt-2 text-sm text-stone-600 dark:text-stone-400">
          Already have an account? Sign in here.
        </p>
      </div>
      <div class="flex flex-col items-center justify-center space-y-4">
        <img class="h-24 w-24 rounded-full border-4 border-amber-500 shadow-md" src="https://randomuser.me/api/portraits/men/82.jpg" alt="User Avatar">
        <p class="text-lg font-semibold text-stone-800 dark:text-stone-100">John Doe</p>
        <button type="button"
          class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-gradient-to-br from-lime-600 to-lime-700 hover:from-lime-700 hover:to-lime-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 dark:focus:ring-offset-stone-900 shadow-lg shadow-lime-500/30 dark:shadow-lime-700/30 transition duration-300 ease-in-out transform translate-z-10 hover:translate-z-20 hover:scale-105 active:scale-95 active:translate-z-5">
          Go to Profile
        </button>
        <p class="text-sm text-stone-600 dark:text-stone-400 mt-4">
          <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400">Or log in with another account</a>
        </p>
      </div>
    </div>
  </div>
</div>

<style>
  /* This is necessary for the 3D effect */
  .perspective-1000 {
    perspective: 1000px;
  }

  .transform-style-preserve-3d {
    transform-style: preserve-3d;
  }

  .backface-hidden {
    backface-visibility: hidden;
  }

  .translate-z-10 {
    transform: translateZ(10px);
  }

  .translate-z-20 {
    transform: translateZ(20px);
  }

  .translate-z-5 {
    transform: translateZ(5px);
  }

  /* Custom styles for the 3D rotation */
  @media (hover: hover) {
    .group:hover .transform-style-preserve-3d:first-child {
      transform: rotateY(180deg);
    }
    .group:hover .transform-style-preserve-3d:last-child {
      transform: rotateY(360deg);
    }
  }

  /* Fallback for touch devices or if hover is not available */
  /* You might replace `group:hover` with a JavaScript-triggered class toggle in a real app */
  .group-hover\:rotate-y-180 {
    transform: rotateY(180deg);
  }
  .group-hover\:rotate-y-360 {
    transform: rotateY(360deg);
  }
</style>

Retro_Charity_Registration_Form

A simple, responsive registration form component with a retro/vintage 80s/90s sepia/brown aesthetic, designed for non-profit/charity purposes, including dark mode support.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 sm:p-6 bg-amber-100 dark:bg-stone-900 font-mono text-stone-800 dark:text-stone-200">
  <div class="w-full max-w-md p-6 sm:p-8 space-y-6 bg-amber-50 dark:bg-stone-800 rounded-lg shadow-xl border-2 border-stone-400 dark:border-stone-600 transform transition-all duration-300 hover:scale-[1.01]">
    <div class="text-center">
      <h2 class="text-3xl sm:text-4xl font-extrabold tracking-tight text-amber-900 dark:text-amber-300 mb-2 transform transition-all duration-300 hover:text-amber-700 dark:hover:text-amber-100 drop-shadow-md">
        Join The Cause!
      </h2>
      <p class="text-sm sm:text-base text-stone-700 dark:text-stone-300">
        Help us make a difference. Sign up to receive updates and news.
      </p>
    </div>

    <form class="space-y-4">
      <div>
        <label for="full-name" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">
          Full Name
        </label>
        <input type="text" id="full-name" name="full-name" autocomplete="name"
          class="appearance-none relative block w-full px-3 py-2 border border-stone-400 dark:border-stone-600 placeholder-stone-500 dark:placeholder-stone-400 text-stone-900 dark:text-stone-100 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500 sm:text-sm bg-amber-200 dark:bg-stone-700 transition-colors duration-200"
          placeholder="Your Name Here">
      </div>

      <div>
        <label for="email-address" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">
          Email Address
        </label>
        <input type="email" id="email-address" name="email" autocomplete="email"
          class="appearance-none relative block w-full px-3 py-2 border border-stone-400 dark:border-stone-600 placeholder-stone-500 dark:placeholder-stone-400 text-stone-900 dark:text-stone-100 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500 sm:text-sm bg-amber-200 dark:bg-stone-700 transition-colors duration-200"
          placeholder="[email protected]">
      </div>

      <div>
        <label for="comments" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">
          Comments (Optional)
        </label>
        <textarea id="comments" name="comments" rows="3"
          class="appearance-none relative block w-full px-3 py-2 border border-stone-400 dark:border-stone-600 placeholder-stone-500 dark:placeholder-stone-400 text-stone-900 dark:text-stone-100 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500 sm:text-sm bg-amber-200 dark:bg-stone-700 transition-colors duration-200"
          placeholder="Anything you'd like to share?"></textarea>
      </div>

      <div class="flex items-center">
        <input id="terms-and-privacy" name="terms-and-privacy" type="checkbox"
          class="h-4 w-4 text-amber-600 focus:ring-amber-500 border-stone-300 dark:border-stone-600 rounded bg-amber-200 dark:bg-stone-700 transition-colors duration-200">
        <label for="terms-and-privacy" class="ml-2 block text-sm text-stone-700 dark:text-stone-300">
          I agree to the <a href="#" class="font-medium text-amber-700 dark:text-amber-400 hover:underline">Terms</a> and
          <a href="#" class="font-medium text-amber-700 dark:text-amber-400 hover:underline">Privacy Policy</a>.
        </label>
      </div>

      <div>
        <button type="submit"
          class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-lg font-medium rounded-md text-white bg-amber-600 hover:bg-amber-700 dark:bg-amber-700 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-stone-800 transition-all duration-300 shadow-lg transform hover:scale-[1.02] active:scale-[0.98]">
          <span class="absolute left-0 inset-y-0 flex items-center pl-3">
            <!-- Heroicon name: solid/heart -->
            <svg class="h-5 w-5 text-amber-200 group-hover:text-amber-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
            </svg>
          </span>
          Count Me In!
        </button>
      </div>
    </form>
  </div>
</div>

RetroRegistrationForm

A retro/vintage registration form component with earth tones, responsive design, and dark theme support, suitable for a blog or content site.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-stone-100 dark:bg-stone-900 p-6">
  <div class="bg-amber-100 dark:bg-amber-900 p-8 rounded-lg shadow-lg max-w-md w-full border-4 border-amber-800 dark:border-amber-700 transform rotate-2 animate-tilt-2">
    <h2 class="text-3xl font-bold text-amber-900 dark:text-amber-100 mb-6 text-center font-mono tracking-wider">Join Our Community</h2>
    <form>
      <div class="mb-4">
        <label for="username" class="block text-amber-800 dark:text-amber-200 text-sm font-bold mb-2 font-mono">Username:</label>
        <input type="text" id="username" name="username" class="shadow appearance-none border-2 border-amber-600 dark:border-amber-400 rounded w-full py-2 px-3 text-amber-900 dark:text-amber-100 leading-tight focus:outline-none focus:shadow-outline bg-amber-50 dark:bg-amber-800 placeholder-amber-400 dark:placeholder-amber-600 font-mono" placeholder="Choose a username">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-amber-800 dark:text-amber-200 text-sm font-bold mb-2 font-mono">Email:</label>
        <input type="email" id="email" name="email" class="shadow appearance-none border-2 border-amber-600 dark:border-amber-400 rounded w-full py-2 px-3 text-amber-900 dark:text-amber-100 leading-tight focus:outline-none focus:shadow-outline bg-amber-50 dark:bg-amber-800 placeholder-amber-400 dark:placeholder-amber-600 font-mono" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-amber-800 dark:text-amber-200 text-sm font-bold mb-2 font-mono">Password:</label>
        <input type="password" id="password" name="password" class="shadow appearance-none border-2 border-amber-600 dark:border-amber-400 rounded w-full py-2 px-3 text-amber-900 dark:text-amber-100 mb-3 leading-tight focus:outline-none focus:shadow-outline bg-amber-50 dark:bg-amber-800 placeholder-amber-400 dark:placeholder-amber-600 font-mono" placeholder="Create a password">
      </div>
      <div class="flex items-center justify-between">
        <button type="submit" class="bg-amber-700 hover:bg-amber-900 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline border-2 border-amber-900 dark:border-amber-500 font-mono transform -rotate-3 hover:rotate-0 transition-transform duration-200">Register Now</button>
        <a class="inline-block align-baseline font-bold text-sm text-amber-700 dark:text-amber-300 hover:text-amber-900 dark:hover:text-amber-100 font-mono" href="#">
          Already have an account?
        </a>
      </div>
    </form>
  </div>
</div>

<style>
  @keyframes tilt-2 {
    0% { transform: rotate(2deg); }
    50% { transform: rotate(-1deg); }
    100% { transform: rotate(2deg); }
  }

  .animate-tilt-2 {
    animation: tilt-2 4s infinite ease-in-out;
  }
</style>

Registration Form Component

A responsive registration form component with a glassmorphism design, grayscale color scheme, and dark theme support, suitable for business/corporate websites.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-8 max-w-md w-full m-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center mb-6">Register</h2>
    <form>
      <div class="mb-4">
        <label for="username" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Username</label>
        <input type="text" id="username" name="username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:text-white opacity-80 backdrop-filter backdrop-blur-sm" placeholder="Enter your username">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
        <input type="email" id="email" name="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:text-white opacity-80 backdrop-filter backdrop-blur-sm" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Password</label>
        <input type="password" id="password" name="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:text-white opacity-80 backdrop-filter backdrop-blur-sm" placeholder="Enter your password">
      </div>
      <div class="flex items-center justify-between">
        <button type="submit" class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-300">
          Register
        </button>
        <a class="inline-block align-baseline font-bold text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200" href="#">
          Already have an account?
        </a>
      </div>
    </form>
  </div>
</div>

Registration Form Component

A responsive registration form component with a glassmorphism style, earth tone color scheme, and dark theme support. Designed for social media platforms, with a simple layout and minimal elements. Uses Tailwind CSS for styling and includes example image placeholders.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="relative p-8 rounded-lg shadow-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg w-full max-w-md border border-gray-200 dark:border-gray-700">
    <div class="absolute inset-0 -z-10 rounded-lg bg-gradient-to-br from-stone-300 to-stone-500 opacity-30 dark:from-stone-700 dark:to-stone-900"></div>
    
    <h2 class="text-3xl font-bold text-center text-stone-800 dark:text-stone-100 mb-6">Register</h2>
    
    <form>
      <div class="mb-4">
        <label for="username" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Username</label>
        <input type="text" id="username" name="username" placeholder="Enter your username" class="w-full p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-800 dark:text-stone-100 placeholder-stone-600 dark:placeholder-stone-300">
      </div>
      
      <div class="mb-4">
        <label for="email" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Email</label>
        <input type="email" id="email" name="email" placeholder="Enter your email" class="w-full p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-800 dark:text-stone-100 placeholder-stone-600 dark:placeholder-stone-300">
      </div>
      
      <div class="mb-6">
        <label for="password" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Password</label>
        <input type="password" id="password" name="password" placeholder="Enter your password" class="w-full p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-800 dark:text-stone-100 placeholder-stone-600 dark:placeholder-stone-300">
      </div>
      
      <button type="submit" class="w-full bg-stone-600 dark:bg-stone-700 text-white p-3 rounded-lg font-semibold hover:bg-stone-700 dark:hover:bg-stone-800 transition duration-300 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
        Register
      </button>
    </form>
    
    <p class="text-center text-stone-700 dark:text-stone-300 text-sm mt-6">
      Already have an account? <a href="#" class="text-stone-800 dark:text-stone-200 font-semibold hover:underline">Login here</a>
    </p>
  </div>
</div>

Skeuomorphism Registration Form Grayscale

A Skeuomorphic Registration Form Component in Grayscale for Portfolios, with Moderate complexity, Responsive design and Dark theme support, no Javascript. Images from picsum.photos and randomuser.me used.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-lighter դark:bg-gray-darker">
  <div class="w-full max-w-md p-8 space-y-6 bg-white rounded-lg shadow-skeuo-light dark:bg-gray-true dark:shadow-skeuo-dark">
    <h2 class="text-2xl font-bold text-center text-gray-900 dark:text-gray-100">Register</h2>
    <form class="space-y-4">
      <div>
        <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Username</label>
        <input type="text" id="username" class="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-inner-skeuo focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-darkest dark:dark:border-gray-700 dark:text-gray-100">
      </div>
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
        <input type="email" id="email" class="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-inner-skeuo focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-darkest dark:dark:border-gray-700 dark:text-gray-100">
      </div>
      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
        <input type="password" id="password" class="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-inner-skeuo focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-darkest dark:dark:border-gray-700 dark:text-gray-100">
      </div>
      <div>
        <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Confirm Password</label>
        <input type="password" id="confirm-password" class="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-inner-skeuo focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-darkest dark:dark:border-gray-700 dark:text-gray-100">
      </div>
      <button type="submit" class="w-full px-4 py-2 text-white bg-black rounded-md shadow-skeuo-button hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:bg-gray-light dark:text-gray-900 dark:hover:bg-gray dark:focus:ring-gray-darker">Register</button>
    </form>
  </div>
</div>

<style>
.shadow-skeuo-light {
  box-shadow: 10px 10px 20px #bebebe, -10px -10px 20px #ffffff;
}

.shadow-skeuo-dark {
  box-shadow: 10px 10px 20px #2c2c2c, -10px -10px 20px #444444;
}

.shadow-inner-skeuo {
    box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
}

.dark .shadow-inner-skeuo {
    box-shadow: inset 5px 5px 10px #2c2c2c, inset -5px -5px 10px #444444;
}

.shadow-skeuo-button {
    box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}

.dark .shadow-skeuo-button {
    box-shadow: 5px 5px 10px #2c2c2c, -5px -5px 10px #444444;
}

.bg-gray-lighter {
    background-color: #f3f3f3;
}

.dark\:bg-gray-darker {
    background-color: #333333;
}

.bg-gray-true {
    background-color: #cccccc;
}

.dark\:bg-gray-true {
    background-color: #333333;
}

.dark\:text-gray-100 {
    color: #eeeeee;
}

.dark\:text-gray-300 {
    color: #cccccc;
}

.dark\:bg-gray-darkest {
    background-color: #1a1a1a;
}

.dark\:border-gray-700 {
    border-color: #4d4d4d;
}

.dark\:bg-gray-light {
    background-color: #cccccc;
}

.dark\:text-gray-900 {
    color: #1a1a1a;
}

.dark\:hover\:bg-gray {
    background-color: #808080;
}

.dark\:focus\:ring-gray-darker {
    --tw-ring-color: #333333;
}

</style>

registration-form-ecommerce-tailwind

Minimalist flat design registration form component for e-commerce using Tailwind CSS with responsive and dark mode support, featuring a complementary blue-orange color scheme.

Open Preview

                <!-- Registration Form Component -->
<div class="min-h-screen flex items-center justify-center p-6 bg-gray-100 dark:bg-gray-800">
  <div class="w-full max-w-md bg-white dark:bg-gray-900 rounded-lg shadow-lg">
    <div class="px-6 py-4">
      <h2 class="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-4">Create Your Account</h2>
      <form action="#" method="POST" class="space-y-4">
        <div>
          <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
          <input type="text" id="full-name" name="fullname" required class="mt-1 block w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:ring-blue-400"/>
        </div>
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
          <input type="email" id="email" name="email" required class="mt-1 block w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:ring-blue-400"/>
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
          <input type="password" id="password" name="password" required class="mt-1 block w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:ring-blue-400"/>
        </div>
        <div>
          <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Confirm Password</label>
          <input type="password" id="confirm-password" name="confirmPassword" required class="mt-1 block w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:ring-blue-400"/>
        </div>
        <button type="submit" class="w-full py-2 px-4 bg-orange-500 hover:bg-orange-600 text-white font-semibold rounded-md focus:outline-none focus:ring-2 focus:ring-orange-400 dark:bg-orange-600 dark:hover:bg-orange-700 dark:focus:ring-orange-500">
          Register
        </button>
      </form>
      <p class="mt-4 text-center text-sm text-gray-600 dark:text-gray-400">
        Already have an account? <a href="#" class="text-orange-500 hover:text-orange-600 dark:text-orange-400 dark:hover:text-orange-500 font-medium">Log in</a>
      </p>
    </div>
  </div>
</div>

Registration Form Component

A responsive registration form component designed in a Brutalist style with a pastel color scheme and suitable for business/corporate websites. It features dark mode support using Tailwind CSS.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 w-full max-w-md">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Register</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
                <input class="border-2 border-gray-300 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-pink-400" type="text" id="name" placeholder="Your Name" required />
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input class="border-2 border-gray-300 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-pink-400" type="email" id="email" placeholder="Your Email" required />
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input class="border-2 border-gray-300 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-pink-400" type="password" id="password" placeholder="Create a Password" required />
            </div>
            <button class="w-full bg-pink-500 hover:bg-pink-600 dark:bg-pink-700 dark:hover:bg-pink-600 text-white font-bold py-2 rounded" type="submit">Register</button>
        </form>
        <div class="mt-4 text-center">
            <img class="mx-auto rounded-full w-12 h-12 mb-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
            <p class="text-sm text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-pink-500 hover:text-pink-600 dark:text-pink-400">Login</a></p>
        </div>
    </div>
</div>

Search Components

Categories

Registration Form