Search Components

Registration Form

Form for creating new user accounts

Registration Form Component

A responsive registration form component designed with a neumorphic style using muted/desaturated colors, suitable for a dashboard environment. It includes dark mode support and uses subtle shadows to create an extruded effect.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-800 transition-colors duration-300">
  <div class="w-full max-w-md p-8 rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-700 bg-gray-200
              dark:border dark:border-gray-600
              [box-shadow:8px_8px_16px_#bebebe,_-8px_-8px_16px_#ffffff]
              dark:[box-shadow:8px_8px_16px_#333333,_-8px_-8px_16px_#555555]">
    <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-300 mb-6 text-center">Register Account</h2>

    <form>
      <div class="mb-4">
        <label for="username" class="block text-gray-600 dark:text-gray-400 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-gray-200 dark:bg-gray-700
               text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-400
               [box-shadow:inset_3px_3px_6px_#bebebe,_inset_-3px_-3px_6px_#ffffff]
               dark:[box-shadow:inset_3px_3px_6px_#333333,_inset_-3px_-3px_6px_#555555]" aria-label="Username field">
      </div>

      <div class="mb-4">
        <label for="email" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Email</label>
        <input type="email" id="email" name="email" placeholder="[email protected]" class="w-full p-3 rounded-lg bg-gray-200 dark:bg-gray-700
               text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-400
               [box-shadow:inset_3px_3px_6px_#bebebe,_inset_-3px_-3px_6px_#ffffff]
               dark:[box-shadow:inset_3px_3px_6px_#333333,_inset_-3px_-3px_6px_#555555]" aria-label="Email field">
      </div>

      <div class="mb-6">
        <label for="password" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Password</label>
        <input type="password" id="password" name="password" placeholder="Minimum 8 characters" class="w-full p-3 rounded-lg bg-gray-200 dark:bg-gray-700
               text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-400
               [box-shadow:inset_3px_3px_6px_#bebebe,_inset_-3px_-3px_6px_#ffffff]
               dark:[box-shadow:inset_3px_3px_6px_#333333,_inset_-3px_-3px_6px_#555555]" aria-label="Password field">
      </div>

      <button type="submit" class="w-full p-3 rounded-lg font-semibold text-white
              bg-blue-500 hover:bg-blue-600 active:bg-blue-700
              shadow-md hover:shadow-lg dark:shadow-md dark:hover:shadow-lg
              [box-shadow:8px_8px_16px_#bebebe,_-8px_-8px_16px_#ffffff]
              dark:[box-shadow:8px_8px_16px_#333333,_-8px_-8px_16px_#555555]
              focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2
              dark:focus:ring-offset-gray-700 transition-all duration-200"
              aria-label="Register button">
        Register
      </button>

      <p class="mt-6 text-center text-gray-600 dark:text-gray-400 text-sm">
        Already have an account? <a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400 font-medium" aria-label="Login link">Login here</a>
      </p>
    </form>
  </div>
</div>

Registration Form Component - Music/Audio Themed

A clean, minimalist registration form component with a Swiss/International typography style and autumn color scheme, designed for music/audio platforms. It's fully responsive, supports dark mode, and uses semantic HTML.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-orange-100 to-amber-200 dark:from-stone-900 dark:to-orange-950 font-sans">
  <div class="max-w-md w-full bg-white dark:bg-stone-800 rounded-lg shadow-xl p-8 space-y-6 transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
    <div class="text-center">
      <h2 class="text-3xl sm:text-4xl font-bold tracking-tight text-stone-800 dark:text-orange-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">
        <span class="block">Tune In</span>
        <span class="block text-xl sm:text-2xl text-orange-500 dark:text-orange-400">Create Your Account</span>
      </h2>
      <p class="text-sm text-stone-600 dark:text-stone-400">
        Unlock a world of music and podcasts.
      </p>
    </div>

    <form class="space-y-5">
      <div>
        <label for="email" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">Email address</label>
        <input type="email" id="email" name="email" autocomplete="email" required
               class="appearance-none block w-full px-4 py-2 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm placeholder-stone-400 dark:placeholder-stone-500
                      focus:outline-none focus:ring-orange-500 focus:border-orange-500 dark:bg-stone-700 dark:text-stone-100 dark:focus:ring-orange-400 dark:focus:border-orange-400
                      sm:text-sm transition-all duration-200">
      </div>

      <div>
        <label for="username" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">Username</label>
        <input type="text" id="username" name="username" autocomplete="username" required
               class="appearance-none block w-full px-4 py-2 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm placeholder-stone-400 dark:placeholder-stone-500
                      focus:outline-none focus:ring-orange-500 focus:border-orange-500 dark:bg-stone-700 dark:text-stone-100 dark:focus:ring-orange-400 dark:focus:border-orange-400
                      sm:text-sm transition-all duration-200">
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">Password</label>
        <input type="password" id="password" name="password" autocomplete="new-password" required
               class="appearance-none block w-full px-4 py-2 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm placeholder-stone-400 dark:placeholder-stone-500
                      focus:outline-none focus:ring-orange-500 focus:border-orange-500 dark:bg-stone-700 dark:text-stone-100 dark:focus:ring-orange-400 dark:focus:border-orange-400
                      sm:text-sm transition-all duration-200">
      </div>

      <div>
        <label for="confirm-password" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">Confirm Password</label>
        <input type="password" id="confirm-password" name="confirm-password" autocomplete="new-password" required
               class="appearance-none block w-full px-4 py-2 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm placeholder-stone-400 dark:placeholder-stone-500
                      focus:outline-none focus:ring-orange-500 focus:border-orange-500 dark:bg-stone-700 dark:text-stone-100 dark:focus:ring-orange-400 dark:focus:border-orange-400
                      sm:text-sm transition-all duration-200">
      </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-orange-600 border-stone-300 rounded dark:text-orange-500 dark:bg-stone-700 dark:border-stone-600 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200">
          <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-orange-600 hover:text-orange-500 dark:text-orange-400 dark:hover:text-orange-300 transition-colors duration-200">
            Terms & Privacy
          </a>
        </div>
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-base font-medium text-white
                       bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500
                       dark:bg-orange-700 dark:hover:bg-orange-600 dark:focus:ring-offset-stone-800 dark:focus:ring-orange-400
                       transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:scale-105">
          Sign Up
        </button>
      </div>
    </form>

    <div class="text-center text-sm text-stone-600 dark:text-stone-400">
      Already have an account?
      <a href="#" class="font-medium text-orange-600 hover:text-orange-500 dark:text-orange-400 dark:hover:text-orange-300 transition-colors duration-200">
        Sign In
      </a>
    </div>
  </div>
</div>

Registration Form Component

A responsive registration form component with a neumorphism design style and neon/electric color scheme, supporting dark mode. Designed for consulting/services.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-black flex items-center justify-center font-sans">
  <div class="w-full max-w-md mx-auto p-6 sm:p-8 md:p-10 rounded-3xl
    bg-gradient-to-br from-gray-100 to-gray-200
    dark:from-gray-800 dark:to-gray-900
    shadow-neumorphism-light dark:shadow-neumorphism-dark
    border border-solid border-transparent dark:border-gray-700
    transition-all duration-500 ease-in-out
    relative overflow-hidden
    before:content-[''] before:absolute before:inset-0
    before:rounded-3xl before:opacity-5 before:z-0
    before:bg-gradient-to-br before:from-blue-500 before:via-purple-500 before:to-pink-500
    dark:before:from-blue-700 dark:before:via-purple-700 dark:before:to-pink-700
    before:blur-lg before:pointer-events-none
    ">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-6 sm:mb-8 md:mb-10
      bg-clip-text text-transparent bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500
      dark:from-blue-400 dark:via-purple-400 dark:to-pink-400
      drop-shadow-lg
      relative z-10
      ">
      Register for Services
    </h2>
    <form class="space-y-4 sm:space-y-6 relative z-10">
      <div>
        <label for="full-name" class="block text-sm font-medium mb-2
          text-gray-700 dark:text-gray-300
          relative before:content-[''] before:absolute before:w-full before:h-px before:-bottom-1 before:left-0 before:bg-gradient-to-r before:from-transparent before:via-blue-300 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300
          ">
          Full Name
        </label>
        <input type="text" id="full-name" name="full-name" placeholder="John Doe"
          class="w-full p-3 rounded-xl
            text-gray-800 dark:text-gray-100
            bg-gray-50 dark:bg-gray-700
            shadow-neumorphism-inset-light dark:shadow-neumorphism-inset-dark
            focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
            dark:focus:ring-blue-400
            transition-all duration-300 ease-in-out
            peer
            group
            "
          required>
      </div>

      <div>
        <label for="email" class="block text-sm font-medium mb-2
          text-gray-700 dark:text-gray-300
          relative before:content-[''] before:absolute before:w-full before:h-px before:-bottom-1 before:left-0 before:bg-gradient-to-r before:from-transparent before:via-purple-300 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300
          ">
          Email Address
        </label>
        <input type="email" id="email" name="email" placeholder="[email protected]"
          class="w-full p-3 rounded-xl
            text-gray-800 dark:text-gray-100
            bg-gray-50 dark:bg-gray-700
            shadow-neumorphism-inset-light dark:shadow-neumorphism-inset-dark
            focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75
            dark:focus:ring-purple-400
            transition-all duration-300 ease-in-out
            "
          required>
      </div>

      <div>
        <label for="phone" class="block text-sm font-medium mb-2
          text-gray-700 dark:text-gray-300
          relative before:content-[''] before:absolute before:w-full before:h-px before:-bottom-1 before:left-0 before:bg-gradient-to-r before:from-transparent before:via-pink-300 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300
          ">
          Phone Number (Optional)
        </label>
        <input type="tel" id="phone" name="phone" placeholder="+1 (555) 123-4567"
          class="w-full p-3 rounded-xl
            text-gray-800 dark:text-gray-100
            bg-gray-50 dark:bg-gray-700
            shadow-neumorphism-inset-light dark:shadow-neumorphism-inset-dark
            focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-75
            dark:focus:ring-pink-400
            transition-all duration-300 ease-in-out
            ">
      </div>

      <div>
        <label for="service" class="block text-sm font-medium mb-2
          text-gray-700 dark:text-gray-300
          relative before:content-[''] before:absolute before:w-full before:h-px before:-bottom-1 before:left-0 before:bg-gradient-to-r before:from-transparent before:via-blue-300 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300
          ">
          Interested Service
        </label>
        <select id="service" name="service"
          class="w-full p-3 rounded-xl appearance-none
            text-gray-800 dark:text-gray-100
            bg-gray-50 dark:bg-gray-700
            shadow-neumorphism-inset-light dark:shadow-neumorphism-inset-dark
            focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
            dark:focus:ring-blue-400
            transition-all duration-300 ease-in-out
            cursor-pointer
            ">
          <option value="" disabled selected class="text-gray-400 dark:text-gray-500">Select a service</option>
          <option value="strategy" class="bg-gray-50 dark:bg-gray-800">Business Strategy</option>
          <option value="marketing" class="bg-gray-50 dark:bg-gray-800">Digital Marketing</option>
          <option value="tech" class="bg-gray-50 dark:bg-gray-800">Technology Consulting</option>
          <option value="hr" class="bg-gray-50 dark:bg-gray-800">HR & Talent Management</option>
          <option value="finance" class="bg-gray-50 dark:bg-gray-800">Financial Advisory</option>
        </select>
      </div>

      <div>
        <label for="message" class="block text-sm font-medium mb-2
          text-gray-700 dark:text-gray-300
          relative before:content-[''] before:absolute before:w-full before:h-px before:-bottom-1 before:left-0 before:bg-gradient-to-r before:from-transparent before:via-purple-300 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300
          ">
          Your Message (Optional)
        </label>
        <textarea id="message" name="message" rows="4" placeholder="Tell us about your needs..."
          class="w-full p-3 rounded-xl
            text-gray-800 dark:text-gray-100
            bg-gray-50 dark:bg-gray-700
            shadow-neumorphism-inset-light dark:shadow-neumorphism-inset-dark
            focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75
            dark:focus:ring-purple-400
            transition-all duration-300 ease-in-out
            resize-y
            "></textarea>
      </div>

      <button type="submit"
        class="w-full py-3 px-6 rounded-full font-bold text-lg
          text-white
          bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500
          dark:from-blue-600 dark:via-purple-600 dark:to-pink-600
          shadow-neumorphism-button dark:shadow-neumorphism-button-dark
          hover:shadow-neumorphism-button-hover dark:hover:shadow-neumorphism-button-hover-dark
          focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-blue-300 dark:focus:ring-blue-700
          focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900
          transition-all duration-300 ease-in-out
          transform hover:-translate-y-0.5 hover:scale-105
          active:translate-y-0 active:scale-100 active:shadow-neumorphism-button-active dark:active:shadow-neumorphism-button-active-dark
          relative group
          overflow-hidden
          before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-white before:to-transparent before:opacity-0 before:scale-0 before:transition-transform before:duration-500 before:ease-out
          hover:before:scale-125 hover:before:opacity-20
          ">
        <span class="relative z-10">Submit Registration</span>
      </button>

      <p class="text-center text-xs sm:text-sm text-gray-500 dark:text-gray-400 mt-4">
        By registering, you agree to our <a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 transition-colors duration-300">Terms of Service</a> and <a href="#" class="text-purple-500 hover:text-purple-600 dark:text-purple-400 dark:hover:text-purple-500 transition-colors duration-300">Privacy Policy</a>.
      </p>
    </form>
  </div>
</div>

<style>
  /* Base Neu-shadows - Customize these values */
  .shadow-neumorphism-light {
    box-shadow: 8px 8px 16px #cdd4df, -8px -8px 16px #ffffff;
  }

  .dark .shadow-neumorphism-dark {
    box-shadow: 8px 8px 16px #22252a, -8px -8px 16px #3e4249;
  }

  /* Inset Neu-shadows */
  .shadow-neumorphism-inset-light {
    box-shadow: inset 5px 5px 10px #cad1db, inset -5px -5px 10px #ffffff;
  }

  .dark .shadow-neumorphism-inset-dark {
    box-shadow: inset 5px 5px 10px #22252a, inset -5px -5px 10px #444951;
  }

  /* Button Neu-shadows */
  .shadow-neumorphism-button {
    box-shadow: 6px 6px 12px #9ba4ae, -6px -6px 12px #ffffff;
  }

  .dark .shadow-neumorphism-button-dark {
    box-shadow: 6px 6px 12px #181a1e, -6px -6px 12px #444951;
  }

  .shadow-neumorphism-button-hover {
    box-shadow: 8px 8px 16px #9ba4ae, -8px -8px 16px #ffffff;
  }

  .dark .shadow-neumorphism-button-hover-dark {
    box-shadow: 8px 8px 16px #181a1e, -8px -8px 16px #444951;
  }

  .shadow-neumorphism-button-active {
    box-shadow: inset 5px 5px 10px #9da6b0, inset -5px -5px 10px #e0e6ec;
  }

  .dark .shadow-neumorphism-button-active-dark {
    box-shadow: inset 5px 5px 10px #1c1f24, inset -5px -5px 10px #3a3d43;
  }

  /* Custom styles for select arrow */
  select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem; /* Make space for the arrow */
  }

  .dark select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E"); /* Dark mode arrow color */
    filter: invert(1);
  }

</style>

Registration Form Component

A complex, responsive registration form component for finance/banking applications, featuring a clean, minimalist design with high-contrast colors, strong typography, and grid-based layout. Includes dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-50 flex items-center justify-center p-4 sm:p-6 lg:p-8 dark:bg-gray-900 font-sans">
  <div class="max-w-4xl w-full bg-white shadow-xl rounded-lg overflow-hidden dark:bg-gray-800 dark:text-gray-200 grid grid-cols-1 md:grid-cols-2 gap-0 border border-gray-200 dark:border-gray-700">

    <!-- Left Section: Header/Intro -->
    <div class="flex flex-col justify-between p-6 sm:p-8 bg-gradient-to-br from-indigo-700 to-blue-800 text-white dark:from-indigo-900 dark:to-blue-950">
      <div>
        <h1 class="text-4xl sm:text-5xl font-extrabold mb-4 leading-tight">Create Your Account</h1>
        <p class="text-lg sm:text-xl font-light opacity-90">Join us to unlock tailored financial solutions designed for your future.</p>
      </div>
      <div class="mt-8">
        <p class="text-sm opacity-80 mb-2">Already have an account?</p>
        <a href="#" class="inline-flex items-center text-white px-4 py-2 border border-white rounded-md hover:bg-white hover:text-indigo-700 transition-colors duration-300 font-medium">
          Sign In
          <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </a>
      </div>
      <img src="https://picsum.photos/300/200?random=1" alt="Abstract financial graphic" class="mt-8 rounded-md shadow-lg opacity-80 hidden md:block">
    </div>

    <!-- Right Section: Registration Form -->
    <div class="p-6 sm:p-8 lg:p-10 flex flex-col justify-center">
      <h2 class="text-3xl sm:text-4xl font-bold mb-6 text-gray-900 dark:text-gray-50">Register and Get Started</h2>

      <form class="space-y-6">
        <div>
          <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
          <div class="mt-1">
            <input type="text" id="full-name" name="full-name" placeholder="John Doe" autocomplete="name" required
                   class="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-base dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 dark:text-white transition-colors duration-200">
          </div>
        </div>

        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
          <div class="mt-1">
            <input type="email" id="email" name="email" placeholder="[email protected]" autocomplete="email" required
                   class="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-base dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 dark:text-white transition-colors duration-200">
          </div>
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
          <div class="mt-1">
            <input type="password" id="password" name="password" placeholder="Minimum 8 characters" autocomplete="new-password" required
                   class="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-base dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 dark:text-white transition-colors duration-200">
          </div>
          <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Must be 8+ characters, including numbers and symbols.</p>
        </div>

        <div>
          <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Confirm Password</label>
          <div class="mt-1">
            <input type="password" id="confirm-password" name="confirm-password" placeholder="Re-enter your password" autocomplete="new-password" required
                   class="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-base dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 dark:text-white transition-colors duration-200">
          </div>
        </div>

        <div class="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 border-gray-300 rounded dark:bg-gray-700 dark:border-gray-600 dark:checked:bg-blue-600 dark:checked:border-blue-600 transition-colors duration-200">
          </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-700 dark:text-blue-400 dark:hover:text-blue-500 font-medium transition-colors duration-200">Terms of Service</a> and <a href="#" class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-500 font-medium transition-colors duration-200">Privacy Policy</a>.</label>
          </div>
        </div>

        <div>
          <button type="submit"
                  class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-offset-gray-800 transition-colors duration-200">
            Register
          </button>
        </div>
      </form>

      <div class="mt-6 relative">
        <div class="absolute inset-0 flex items-center" aria-hidden="true">
          <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-2 bg-white text-gray-500 dark:bg-gray-800 dark:text-gray-400">Or continue with</span>
        </div>
      </div>

      <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
        <button type="button"
                class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800 transition-colors duration-200">
          <svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 16 16"><path d="M15.518 8.006c0-.528-.046-.928-.112-1.304H8V4.168h4.436c-.074-.784-.452-1.488-.992-1.928a5.2 5.2 0 00-3.444-1.296A5.28 5.28 0 002.72 5.6C2.72 7.024 3.736 8.304 4.984 8.948S7.096 9.772 8 9.772c1.78 0 2.928-.68 3.5-1.122l2.35 2.188c-1.396 1.28-3.328 2.052-5.78 2.052a7.99 7.99 0 01-7.8-7.988C.2 3.512 1.348 2.176 2.76 1.136S5.508 0 8 0a7.9 7.9 0 015.688 2.228 7.96 7.96 0 012.35 5.778z"></path></svg>
          Google
        </button>
        <button type="button"
                class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800 transition-colors duration-200">
          <svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 16 16"><path d="M11.517 7.034c-.878-.492-1.74-.954-2.584-1.411-.84-.456-1.57-.852-2.196-1.189-.62-.33-.974-.6-1.074-.79a.294.294 0 01-.01-.07c.026-.065.176-.145.446-2.072 0 0-.294 1.706-2.502 1.954C2.192 3.654 0 5.4 0 7.55c0 2.15 1.572 4.1 3.4 5.922 1.82 1.82 3.8 3.484 5.952 3.484 2.152 0 3.7-1.5 3.7-3.75 0-2.25-1.534-3.75-3.7-3.75zM8 4.2C7.2 3.8 6.4 3.4 5.8 3.1c-.6-.3-1.1-.4-1.3-.4-.2 0-.4.1-.6.2-.2.1-.3.3-.3.4 0 .1 0 .2.1.2.1.1.2.2.3.2.1 0 .2 0 .3 0 .1 0 .2.1.3.1.1 0 .2.1.2.1.1 0 .2.1.3.1.1 0 .2 0 .3-.1l.1-.1c.1-.1.1-.2.2-.3-.1-.1-.2-.2-.3-.3-.1-.1-.2-.2-.3-.2 0 0 .1 0 .2 0 .1 0 .2.1.3.1.1 0 .2-.1.3-.1.1 0 .2-.1.3-.1.1 0 .2-.1.3-.1.1-.1.2-.1.3-.2-.1-.1-.1-.1-.2-.1-.1 0-.2 0-.2.1-.1 0-.1.1-.2.1-.1 0-.2.1-.3.1-.1 0-.2.1-.3.1-.1 0-.2.1-.3.1-.1 0-.2.1-.2.1-.1 0-.2 0-.2.1-.1 0-.1.1-.2.1-.1 0-.2.1-.2.1-.1 0-.1.1-.2.1-.1 0-.2.1-.3.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.2-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0;m-1 7.15c.3.1.6.2.9.4.3.2.5.3.7.4.2.1.4.2.6.2.2.1.4.1.6.1.2 0 .4-.1.6-.2.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3zm-11.838 1.12c-.528-.48-.954-.954-1.284-1.396-.33-.442-.516-.764-.556-.962-.02-.1-.01-.3.02-.4.03-.1.14-.3.34-.4.2-.1.4-.2.6-.3.2-.1.4-.1.6-.2.2-.1.4-.1.6-.1.2 0 .4-.1.6-.1.2 0 .4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2 0 .4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1c.32-.4 1.134-1.396 1.134-1.3961zm1.264 4.092c-.39-.148-.776-.296-1.156-.444-.38-.148-.752-.292-1.116-.436-.36-.14-.7-.272-1.02-.396-.32-.12-.62-.23-.9-.33-.28-.1-.54-.188-.78-.264-.24-.076-.46-.14-.66-.192-.2-.052-.38-.09-.54-.114-.16-.02-.3-.034-.42-.042-.12-.008-.22-.012-.3-.012-.08 0-.14.004-.18.012-.04.008-.06.012-.06.012l.056-.002c-.012-.004-.02-.006-.024-.006-.004 0-.006-.002-.006-.002-.002 0-.002 0-.002 0zM12.924 1.638s-2.028-.466-2.046-1.042c-.018-.576.4-1.034.4-1.034l.006-.004s-.418.458-.4 1.034c.018.576.602 1.042.602 1.042L12.924 1.638zm-1.42 2.392s-1.46-.226-1.47-.642c-.01-.416.3-.642.3-.642l.004-.002s-.314.226-.3 0c.01-.416.48-1.506.48-1.506l.004-.002s-.474 1.09-.48 1.506c-.006.416.29 1.152.29 1.152l.002 0zm-2.088 1.704s-1.42-.516-1.43-.932c-.01-.416.29-.64.29-.64l.004-.002s-.3.224-.3.64c0 .416.307.72.307.72l.002 0zm-2.31 1.714s-.91-.18-1.01-.444c-.1-.264.06-.444.06-.444l.002-.002s-.07.18-.06.444c.01.264.25.444.25.444l.002 0zm-3.084 2.87c-.82-.68-1.458-1.258-1.916-1.734-.46-.476-.732-.82-.816-1.03-.08-.21-.06-.38-.008-.5.05-.12.16-.23.332-.33.17-.1.35-.16.54-.18.19-.02.38-.006.56.042.18.05.35.13.5.24.15.11.28.24.39.39.11.15.2.3.26.46.06.16.08.31.06.45-.02.14-.08.27-.18.38-.1.11-.23.2-.38.27-.15.07-.3.1-.46.09-.16-.01-.32-.07-.48-.18-.16-.11-.3-.26-.43-.46-.13-.2-.24-.44-.32-.7-.08-.26-.14-.54-.14-.84s.01-.58.04-.88c.03-.3.09-.59.18-.87.09-.28.2-.54.34-.78.14-.24.3-.46.48-.65.18-.19.38-.34.58-.46.2-.12.42-.2.66-.23.24-.03.48-.02.72.03.24.05.47.14.68.27.21.13.4.29.57.49.17.2.32.42.44.66.12.24.22.5.28.78.06.28.08.57.06.86-.02.29-.09.57-.22.84-.13.27-.3.53-.52.76-.22.23-.48.43-.76.6-.28.17-.58.3-.9.39-.32.09-.65.13-.98.12-.33-.01-.66-.08-.98-.21-.32-.13-.63-.3-.92-.53-.29-.23-.55-.49-.77-.79-.22-.3-.4-.63-.5-.95-.1-.32-.14-.66-.12-.99.02-.33.1-.66.24-.97.14-.3.3-.59.49-.85.19-.26.39-.49.62-.7.23-.21.49-.39.75-.54.26-.15.53-.26.8-.35.27-.09.55-.13.82-.12.27.01.54.06.8.15.26.09.5.2.7.34.2.14.4.3.57.48.17.18.3.37.4.58.1.21.16.42.17.63.01.21-.02.42-.09.63-.07.21-.18.4-.33.56-.15.16-.32.29-.5.39-.18.1-.38.16-.58.17-.2.01-.4-.02-.6-.09-.2-.07-.39-.17-.55-.29-.16-.12-.3-.27-.4-.44-.1-.17-.16-.36-.16-.56 0-.2.04-.39.12-.57.08-.18.19-.34.33-.48.14-.14.29-.25.46-.33.17-.08.33-.12.5-.12.17 0 .34.03.5.09.16.06.31.13.44.22.13.09.25.19.34.3.09.11.16.22.2.34.04.12.06.24.06.36 0 .12-.02.24-.06.36-.04.12-.1.23-.19.34-.09.11-.19.2-.3.29-.11.09-.23.16-.36.21-.13.05-.27.08-.41.08-.14 0-.28-.02-.41-.06-.13-.04-.25-.1-.37-.17-.12-.07-.23-.15-.33-.23-.1-.08-.19-.17-.26-.26-.07-.09-.12-.19-.15-.3-.03-.11-.04-.22-.02-.33.02-.11.07-.21.14-.3.07-.09.15-.17.25-.23.1-.06.2-.1.3-.12.1-.02.2-.02.3-.01.1 0 .2.01.3.03.1.02.2.04.3.07.1.03.2.06.3.1.1.04.2.07.2.11s.01.07.01.09c0 .02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01-.004-.002-.006-.002zM12.924 1.638L12.924 1.638zM15.518 8.006c-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304.066.376.112.776.112 1.304H8V4.168h4.436c-.074-.784-.452-1.488-.992-1.928a5.2 5.2 0 00-3.444-1.296A5.28 5.28 0 002.72 5.6C2.72 7.024 3.736 8.304 4.984 8.948S7.096 9.772 8 9.772c1.78 0 2.928-.68 3.5-1.122l2.35 2.188c-1.396 1.28-3.328 2.052-5.78 2.052a7.99 7.99 0 01-7.8-7.988C.2 3.512 1.348 2.176 2.76 1.136S5.508 0 8 0a7.9 7.9 0 015.688 2.228 7.96 7.96 0 012.35 5.778z"></path><path d="M11.517 7.034c-.878-.492-1.74-.954-2.584-1.411-.84-.456-1.57-.852-2.196-1.189-.62-.33-.974-.6-1.074-.79a.294.294 0 01-.01-.07c.026-.065.176-.145.446-2.072 0 0-.294 1.706-2.502 1.954C2.192 3.654 0 5.4 0 7.55c0 2.15 1.572 4.1 3.4 5.922 1.82 1.82 3.8 3.484 5.952 3.484 2.152 0 3.7-1.5 3.7-3.75 0-2.25-1.534-3.75-3.7-3.75z"></path></svg>
          Apple
        </button>
      </div>
    </div>
  </div>
</div>

Art Deco Registration Form

A responsive registration form component with an Art Deco design aesthetic, high-contrast color scheme, and dark mode support, suitable for government or public service websites.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-gray-900 dark:from-gray-950 dark:via-blue-900 dark:to-purple-950 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-serif">
  <div class="w-full max-w-lg bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 shadow-2xl rounded-lg overflow-hidden border-4 border-yellow-600 dark:border-yellow-400 transform transition-all duration-300 ease-in-out hover:scale-[1.01]">
    <div class="p-6 sm:p-8 lg:p-10 bg-yellow-600 dark:bg-yellow-700 text-white text-center border-b-4 border-yellow-700 dark:border-yellow-800 relative select-none">
      <h2 class="text-3xl sm:text-4xl font-bold tracking-wider uppercase drop-shadow-lg leading-tight">
        <span class="block">Public Service</span>
        <span class="block text-xl sm:text-2xl mt-1">Registration</span>
      </h2>
      <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
        <div class="absolute w-24 h-24 sm:w-32 sm:h-32 bg-white dark:bg-gray-900 opacity-10 rounded-full animate-pulse"></div>
        <div class="absolute w-16 h-16 sm:w-24 sm:h-24 bg-white dark:bg-gray-900 opacity-5 rounded-full animate-pulse animation-delay-200"></div>
      </div>
    </div>

    <form class="p-6 sm:p-8 lg:p-10 grid grid-cols-1 gap-y-6 sm:gap-y-8 select-none">
      <div class="relative group">
        <label for="full-name" class="absolute -top-3 left-3 px-1 text-xs text-indigo-700 dark:text-blue-400 bg-gray-200 dark:bg-gray-800 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-2 transition-all group-focus-within:-top-3 group-focus-within:text-indigo-700 dark:group-focus-within:text-blue-400 group-focus-within:text-xs">
          Full Name
        </label>
        <input type="text" id="full-name" name="full_name" placeholder="John Doe" class="peer block w-full px-4 py-3 rounded-md border-2 border-indigo-400 dark:border-blue-700 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-transparent focus:outline-none focus:border-indigo-600 dark:focus:border-blue-500 transition-colors duration-200">
      </div>

      <div class="relative group">
        <label for="email" class="absolute -top-3 left-3 px-1 text-xs text-indigo-700 dark:text-blue-400 bg-gray-200 dark:bg-gray-800 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-2 transition-all group-focus-within:-top-3 group-focus-within:text-indigo-700 dark:group-focus-within:text-blue-400 group-focus-within:text-xs">
          Email Address
        </label>
        <input type="email" id="email" name="email" placeholder="[email protected]" class="peer block w-full px-4 py-3 rounded-md border-2 border-indigo-400 dark:border-blue-700 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-transparent focus:outline-none focus:border-indigo-600 dark:focus:border-blue-500 transition-colors duration-200">
      </div>

      <div class="relative group">
        <label for="password" class="absolute -top-3 left-3 px-1 text-xs text-indigo-700 dark:text-blue-400 bg-gray-200 dark:bg-gray-800 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-2 transition-all group-focus-within:-top-3 group-focus-within:text-indigo-700 dark:group-focus-within:text-blue-400 group-focus-within:text-xs">
          Create Password
        </label>
        <input type="password" id="password" name="password" placeholder="********" class="peer block w-full px-4 py-3 rounded-md border-2 border-indigo-400 dark:border-blue-700 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-transparent focus:outline-none focus:border-indigo-600 dark:focus:border-blue-500 transition-colors duration-200">
      </div>

      <div class="relative group">
        <label for="confirm-password" class="absolute -top-3 left-3 px-1 text-xs text-indigo-700 dark:text-blue-400 bg-gray-200 dark:bg-gray-800 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-2 transition-all group-focus-within:-top-3 group-focus-within:text-indigo-700 dark:group-focus-within:text-blue-400 group-focus-within:text-xs">
          Confirm Password
        </label>
        <input type="password" id="confirm-password" name="confirm_password" placeholder="********" class="peer block w-full px-4 py-3 rounded-md border-2 border-indigo-400 dark:border-blue-700 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-transparent focus:outline-none focus:border-indigo-600 dark:focus:border-blue-500 transition-colors duration-200">
      </div>

      <div class="relative group">
        <label for="dob" class="absolute -top-3 left-3 px-1 text-xs text-indigo-700 dark:text-blue-400 bg-gray-200 dark:bg-gray-800 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-2 transition-all group-focus-within:-top-3 group-focus-within:text-indigo-700 dark:group-focus-within:text-blue-400 group-focus-within:text-xs">
          Date of Birth
        </label>
        <input type="date" id="dob" name="dob" class="peer block w-full px-4 py-3 rounded-md border-2 border-indigo-400 dark:border-blue-700 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-transparent focus:outline-none focus:border-indigo-600 dark:focus:border-blue-500 transition-colors duration-200">
      </div>

      <div class="flex items-center space-x-3 mt-2">
        <input type="checkbox" id="terms" name="terms" class="h-5 w-5 text-yellow-600 dark:text-yellow-400 bg-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-700 rounded focus:ring-yellow-500 dark:focus:ring-yellow-300">
        <label for="terms" class="text-sm text-gray-700 dark:text-gray-300">
          I agree to the <a href="#" class="text-indigo-600 dark:text-blue-400 hover:underline font-semibold">Terms of Service</a>
        </label>
      </div>

      <button type="submit" class="w-full px-6 py-3 mt-4 text-lg font-bold text-white bg-indigo-700 dark:bg-blue-600 rounded-md shadow-lg transform transition-all duration-300 ease-in-out hover:scale-105 hover:bg-indigo-800 dark:hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-blue-800 active:scale-95 border-b-4 border-indigo-900 dark:border-blue-800">
        Register Account
      </button>
    </form>

    <div class="p-6 sm:p-8 lg:p-10 text-center text-sm bg-gray-100 dark:bg-gray-900 border-t-4 border-gray-300 dark:border-gray-700">
      <p class="text-gray-600 dark:text-gray-400">
        Already have an account? <a href="#" class="text-indigo-600 dark:text-blue-400 hover:underline font-semibold">Sign In Here</a>
      </p>
    </div>
  </div>
</div>

Registration Form Component

A simple, responsive registration form for a marketplace with an industrial design style, warm neutral color scheme, and dark mode support.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 font-sans p-4">
  <div class="max-w-md w-full bg-stone-50 dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-stone-200 dark:border-gray-700">
    <div class="px-8 py-6 bg-stone-100 dark:bg-gray-700 border-b border-stone-200 dark:border-gray-600">
      <h2 class="text-2xl font-bold text-stone-800 dark:text-stone-100 text-center uppercase tracking-wide">Join Our Marketplace</h2>
      <p class="mt-2 text-center text-sm text-stone-600 dark:text-stone-300">Create your account to start selling and buying.</p>
    </div>
    <form class="px-8 py-8 space-y-6">
      <div>
        <label for="username" class="block text-sm font-medium text-stone-700 dark:text-stone-200">Username</label>
        <div class="mt-1">
          <input type="text" id="username" name="username" autocomplete="username" required class="block w-full px-4 py-2 bg-white dark:bg-gray-900 border border-stone-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 text-stone-800 dark:text-stone-100 placeholder-stone-400 dark:placeholder-gray-500 sm:text-sm font-mono tracking-tight">
        </div>
      </div>
      <div>
        <label for="email" class="block text-sm font-medium text-stone-700 dark:text-stone-200">Email address</label>
        <div class="mt-1">
          <input type="email" id="email" name="email" autocomplete="email" required class="block w-full px-4 py-2 bg-white dark:bg-gray-900 border border-stone-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 text-stone-800 dark:text-stone-100 placeholder-stone-400 dark:placeholder-gray-500 sm:text-sm font-mono tracking-tight">
        </div>
      </div>
      <div>
        <label for="password" class="block text-sm font-medium text-stone-700 dark:text-stone-200">Password</label>
        <div class="mt-1">
          <input type="password" id="password" name="password" autocomplete="new-password" required class="block w-full px-4 py-2 bg-white dark:bg-gray-900 border border-stone-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 text-stone-800 dark:text-stone-100 placeholder-stone-400 dark:placeholder-gray-500 sm:text-sm font-mono tracking-tight">
        </div>
      </div>
      <div>
        <label for="confirm-password" class="block text-sm font-medium text-stone-700 dark:text-stone-200">Confirm Password</label>
        <div class="mt-1">
          <input type="password" id="confirm-password" name="confirm-password" autocomplete="new-password" required class="block w-full px-4 py-2 bg-white dark:bg-gray-900 border border-stone-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 text-stone-800 dark:text-stone-100 placeholder-stone-400 dark:placeholder-gray-500 sm:text-sm font-mono tracking-tight">
        </div>
      </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 dark:text-amber-500 border-stone-300 dark:border-gray-600 rounded focus:ring-amber-500">
        <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-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400">Terms</a>
          and
          <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400">Privacy Policy</a>
        </label>
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-amber-700 hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-amber-600 dark:hover:bg-amber-700 dark:focus:ring-offset-gray-800 uppercase tracking-widest transition duration-150 ease-in-out">
          Register
        </button>
      </div>
    </form>
    <div class="px-8 py-6 bg-stone-100 dark:bg-gray-700 border-t border-stone-200 dark:border-gray-600 text-center">
      <p class="text-sm text-stone-600 dark:text-stone-300">
        Already have an account?
        <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400">Sign in here</a>
      </p>
    </div>
  </div>
</div>

Registration Form Component

A simple, responsive registration form component with neon/glow effects, cool neutral color scheme, and dark mode support, suitable for photography-related websites.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 transition-colors duration-300">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden animate-fade-in border border-gray-200 dark:border-gray-700 relative">
    <!-- Neon Box Shadow Effect -->
    <div class="absolute -inset-0.5 bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 rounded-lg blur opacity-75 animate-pulse dark:from-blue-600 dark:via-purple-700 dark:to-pink-700 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"></div>
    <div class="relative p-8 space-y-6 bg-white dark:bg-gray-800 rounded-lg">

      <h2 class="text-3xl font-extrabold text-center text-gray-900 dark:text-white mb-6 tracking-tight animate-fade-down">
        Register for <span class="text-blue-500 dark:text-blue-400">Inspiration</span>
      </h2>

      <form class="space-y-5">
        <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" autocomplete="name" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500"
            aria-label="Full Name">
        </div>

        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            Email Address
          </label>
          <input type="email" id="email" name="email" placeholder="[email protected]" autocomplete="email" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500"
            aria-label="Email Address">
        </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="••••••••" autocomplete="new-password" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500"
            aria-label="Password">
        </div>

        <div>
          <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            Confirm Password
          </label>
          <input type="password" id="confirm-password" name="confirm-password" placeholder="••••••••" autocomplete="new-password" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500"
            aria-label="Confirm Password">
        </div>

        <button type="submit"
          class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold text-white
            bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-600 dark:to-purple-600
            hover:from-blue-600 hover:to-purple-600 dark:hover:from-blue-700 dark:hover:to-purple-700
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-400
            transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
            relative overflow-hidden group"
          aria-label="Register Account">
            Register
            <!-- Small glow effect on button hover -->
            <span class="absolute inset-0 w-full h-full transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 ease-out bg-gradient-to-r from-blue-300 to-purple-300 dark:from-blue-500 dark:to-purple-500 opacity-20"></span>
        </button>
      </form>

      <p class="mt-6 text-center 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-400 dark:hover:text-blue-300 transition-colors duration-200"
          aria-label="Login Link">
          Sign in
        </a>
      </p>
    </div>
  </div>
</div>

<!-- To demonstrate the glow/pulse effect better, ensure these keyframe animations are present in your CSS setup (e.g., in a global CSS file or via Tailwind's JIT mode if configured) -->
<style>
  @keyframes pulse { 
    0%, 100% { 
      opacity: 0.75;
    }
    50% {
      opacity: 1;
      transform: scale(1.02);
    }
  }
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fade-down {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
  }
  .animate-fade-down {
    animation: fade-down 0.5s ease-out forwards;
  }
</style>

Registration Form Component

A complex, responsive registration form component with a forest/green gradient color scheme, smooth transitions, and dark mode support, suitable for educational platforms.

Open Preview

                <div class="min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center bg-gradient-to-br from-green-50 to-emerald-100 dark:from-gray-900 dark:to-green-950 transition-all duration-500 ease-in-out">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden md:flex transform transition-all duration-500 ease-in-out hover:shadow-2xl">

    <!-- Left Section: Image / Branding -->
    <div class="md:w-1/2 p-6 sm:p-8 lg:p-10 flex flex-col justify-center items-center text-center bg-gradient-to-br from-green-400 to-emerald-600 dark:from-green-700 dark:to-emerald-900 text-white relative overflow-hidden">
      <div class="absolute inset-0 opacity-10 dark:opacity-5 transition-opacity duration-500" style="background-image: url('https://picsum.photos/600/800?random=1'); background-size: cover; background-position: center;"></div>
      <div class="relative z-10">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-4 leading-tight drop-shadow-lg">Join Our Learning Journey</h2>
        <p class="text-base sm:text-lg lg:text-xl font-light mb-6 opacity-90 drop-shadow">Unlock a world of knowledge and connect with expert instructors. Start your adventure today!</p>
        <div class="space-y-4">
          <div class="flex items-center justify-center space-x-3">
            <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            <span class="text-lg font-medium">Interactive Courses</span>
          </div>
          <div class="flex items-center justify-center space-x-3">
            <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H4zm12 1v10H4V5h12zm-3 7a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
            <span class="text-lg font-medium">Expert Instructors</span>
          </div>
          <div class="flex items-center justify-center space-x-3">
            <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V4a2 2 0 00-2-2H6zm0 2h8v12H6V4zm2 3.5a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1zm1 5.5a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
            <span class="text-lg font-medium">Certification Programs</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Right Section: Registration Form -->
    <div class="md:w-1/2 p-6 sm:p-8 lg:p-10 flex flex-col justify-center">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-6 text-center transform transition-colors duration-500">
        Create Your Account
      </h2>
      <form class="space-y-6">

        <!-- Full Name -->
        <div>
          <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 transition-colors duration-500">Full Name</label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"></path></svg>
            </div>
            <input type="text" id="full-name" name="full-name" placeholder="John Doe" class="mt-1 block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-600 focus:border-transparent dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-300 ease-in-out" required>
          </div>
        </div>

        <!-- Email Address -->
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 transition-colors duration-500">Email Address</label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path></svg>
            </div>
            <input type="email" id="email" name="email" placeholder="[email protected]" class="mt-1 block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-600 focus:border-transparent dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-300 ease-in-out" required>
          </div>
        </div>

        <!-- Password -->
        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 transition-colors duration-500">Password</label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2h2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2h2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path></svg>
            </div>
            <input type="password" id="password" name="password" placeholder="Minimum 8 characters" class="mt-1 block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-600 focus:border-transparent dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-300 ease-in-out" required>
          </div>
        </div>

        <!-- Confirm Password -->
        <div>
          <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 transition-colors duration-500">Confirm Password</label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2h2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2h2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path></svg>
            </div>
            <input type="password" id="confirm-password" name="confirm-password" placeholder="Re-enter password" class="mt-1 block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-600 focus:border-transparent dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-300 ease-in-out" required>
          </div>
        </div>

        <!-- Terms & Privacy Checkbox -->
        <div class="flex items-center">
          <input id="terms-privacy" name="terms-privacy" type="checkbox" class="h-4 w-4 text-green-600 dark:text-green-500 focus:ring-green-500 dark:focus:ring-green-400 border-gray-300 dark:border-gray-600 rounded transition-all duration-300" required>
          <label for="terms-privacy" class="ml-2 block text-sm text-gray-900 dark:text-gray-300 transition-colors duration-500">
            I agree to the <a href="#" class="font-medium text-green-600 dark:text-green-500 hover:text-green-500 dark:hover:text-green-400 transition-colors duration-300">Terms of Service</a> and <a href="#" class="font-medium text-green-600 dark:text-green-500 hover:text-green-500 dark:hover:text-green-400 transition-colors duration-300">Privacy Policy</a>.
          </label>
        </div>

        <!-- Submit Button -->
        <div>
          <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-lg font-semibold text-white bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-offset-gray-800 dark:focus:ring-green-600 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 active:scale-95">
            Register Now
          </button>
        </div>

        <!-- Social Login Options -->
        <div class="relative py-4">
          <div class="absolute inset-0 flex items-center">
            <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
          </div>
          <div class="relative flex justify-center text-sm">
            <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 transition-colors duration-500">Or continue with</span>
          </div>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <button type="button" class="w-full flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-green-600 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5">
            <svg class="w-5 h-5 mr-2" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M24 9.5c3.27 0 5.66.97 7.76 2.94l6.19-6.19C34.73 2.92 29.8 1 24 1 15.34 1 8.08 5.76 5.09 13.06l6.6 5.15C13.23 13.9 18.06 9.5 24 9.5z" fill="#EA4335"/>
              <path d="M13.23 18.21l-6.6-5.15C5.76 15.92 5 19.8 5 24c0 4.2.76 8.08 2.06 11.09l6.6-5.15C13.9 27.06 13.23 24 13.23 24s0 0 0 0z" fill="#FBBC04"/>
              <path d="M24 38.5c-5.94 0-10.77-4.4-12.27-10.29l-6.6 5.15C8.08 42.24 15.34 47 24 47c7.58 0 13.56-2.92 18.01-7.86l-6.19-6.19C29.66 37.03 26.73 38.5 24 38.5z" fill="#34A853"/>
              <path d="M42.01 24c0-1.74-.15-3.39-.43-5H24v10h11.23c-.53 2.87-2.32 5.25-4.88 6.84L38.01 39C40.68 36.87 42.01 33.4 42.01 24z" fill="#4285F4"/>
            </svg>
            Google
          </button>
          <button type="button" class="w-full flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-green-600 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22.11C18.342 21.364 22 17.114 22 12z" clip-rule="evenodd" />
            </svg>
            Facebook
          </button>
        </div>

        <!-- Already have an account -->
        <div class="text-center mt-6">
          <p class="text-sm text-gray-500 dark:text-gray-400 transition-colors duration-500">
            Already have an account? <a href="#" class="font-medium text-green-600 dark:text-green-500 hover:text-green-500 dark:hover:text-green-400 transition-colors duration-300">Sign In</a>
          </p>
        </div>

      </form>
    </div>

  </div>
</div>

Registration Form Component

A responsive booking/reservation registration form component with a dark mode UI and neon/electric color scheme, designed for appointment and reservation systems.

Open Preview

                <div class="min-h-screen bg-gray-950 dark:bg-black p-4 sm:p-6 lg:p-8 flex items-center justify-center font-sans">
  <div class="max-w-md w-full bg-gray-900 dark:bg-gray-900 rounded-lg shadow-2xl p-6 sm:p-8 border border-purple-700 dark:border-purple-600 animate-fade-in">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-white text-center mb-6 sm:mb-8 tracking-wide animate-pulse-light">
      Book Your Spot
    </h2>
    <p class="text-center text-gray-400 mb-6 sm:mb-8 text-sm sm:text-base">
      Fill out the form below to reserve your appointment.
    </p>

    <form class="space-y-4 sm:space-y-6">
      <div>
        <label for="full-name" class="block text-sm font-medium text-purple-400 mb-2">Full Name</label>
        <input type="text" id="full-name" class="w-full p-3 bg-gray-800 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-green-400 border border-transparent focus:border-green-400 placeholder-gray-500 transition duration-300 ease-in-out" placeholder="John Doe" required>
      </div>

      <div>
        <label for="email" class="block text-sm font-medium text-purple-400 mb-2">Email Address</label>
        <input type="email" id="email" class="w-full p-3 bg-gray-800 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 border border-transparent focus:border-blue-400 placeholder-gray-500 transition duration-300 ease-in-out" placeholder="[email protected]" required>
      </div>

      <div>
        <label for="phone" class="block text-sm font-medium text-purple-400 mb-2">Phone Number</label>
        <input type="tel" id="phone" class="w-full p-3 bg-gray-800 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-pink-400 border border-transparent focus:border-pink-400 placeholder-gray-500 transition duration-300 ease-in-out" placeholder="+1 (555) 123-4567">
      </div>

      <div>
        <label for="date" class="block text-sm font-medium text-purple-400 mb-2">Preferred Date</label>
        <input type="date" id="date" class="w-full p-3 bg-gray-800 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-green-400 border border-transparent focus:border-green-400 transition duration-300 ease-in-out" required>
      </div>

      <div>
        <label for="time" class="block text-sm font-medium text-purple-400 mb-2">Preferred Time</label>
        <input type="time" id="time" class="w-full p-3 bg-gray-800 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 border border-transparent focus:border-blue-400 transition duration-300 ease-in-out" required>
      </div>

      <div>
        <label for="service" class="block text-sm font-medium text-purple-400 mb-2">Service Type</label>
        <select id="service" class="w-full p-3 bg-gray-800 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-pink-400 border border-transparent focus:border-pink-400 transition duration-300 ease-in-out" required>
          <option value="">Select a service</option>
          <option value="consultation">Consultation</option>
          <option value="repair">Repair</option>
          <option value="installation">Installation</option>
          <option value="maintenance">Maintenance</option>
        </select>
      </div>

      <div>
        <label for="message" class="block text-sm font-medium text-purple-400 mb-2">Additional Notes (Optional)</label>
        <textarea id="message" rows="3" class="w-full p-3 bg-gray-800 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-green-400 border border-transparent focus:border-green-400 placeholder-gray-500 transition duration-300 ease-in-out resize-y" placeholder="Any specific requests or details..."></textarea>
      </div>

      <button type="submit" class="w-full flex items-center justify-center p-3 text-lg font-semibold rounded-md bg-gradient-to-r from-purple-600 to-blue-500 text-white hover:from-purple-700 hover:to-blue-600 focus:outline-none focus:ring-4 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 animate-gradient-hover">
        Confirm Booking
        <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </form>

    <p class="text-center text-gray-500 text-xs sm:text-sm mt-8">
      Need help? <a href="#" class="text-purple-400 hover:underline">Contact support</a>
    </p>
  </div>
</div>

<style>
  /* Adding a subtle animation for the form as it loads */
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fade-in 0.7s ease-out forwards;
  }

  /* Neon light effect for the title */
  @keyframes pulse-light {
    0%, 100% { text-shadow: 0 0 5px #e879f9, 0 0 10px #e879f9, 0 0 15px #c084fc; }
    50% { text-shadow: 0 0 7px #d946ef, 0 0 12px #d946ef, 0 0 17px #a78bfa; }
  }
  .animate-pulse-light {
    animation: pulse-light 3s infinite alternate;
  }

  /* Button hover effect - inspired by gradients */
  @keyframes gradient-hover {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }
  .animate-gradient-hover:hover {
    background-size: 200% auto;
    animation: gradient-hover 3s ease-in-out infinite alternate;
  }
</style>

Registration Form Component

A responsive registration form component with an industrial yet candy-sweet color scheme, suitable for non-profit/charity organizations, featuring exposed elements and utilitarian aesthetics.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-zinc-200 dark:bg-zinc-900 p-4 font-mono select-none">
  <div class="bg-white dark:bg-zinc-800 rounded-lg shadow-xl p-8 max-w-lg w-full transform transition-all duration-300 ease-in-out
              border-4 border-dashed border-pink-400 dark:border-pink-600
              hover:shadow-2xl hover:border-solid hover:border-pink-500 dark:hover:border-pink-700">
    <div class="text-center mb-8">
      <h2 class="text-4xl md:text-5xl font-extrabold text-pink-500 dark:text-pink-400 mb-2 tracking-tighter uppercase leading-none">
        Join Us!
      </h2>
      <p class="text-zinc-600 dark:text-zinc-400 text-lg md:text-xl font-medium tracking-wide leading-tight">
        Register for a Sweet Cause
      </p>
    </div>

    <form class="space-y-6">
      <div>
        <label for="full-name" class="block text-sm font-bold text-zinc-700 dark:text-zinc-300 mb-2 uppercase tracking-tight">
          Full Name
        </label>
        <input type="text" id="full-name" placeholder="John Doe" class="w-full p-3 bg-zinc-100 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200
                     border-2 border-zinc-300 dark:border-zinc-600 rounded-md
                     focus:outline-none focus:ring-4 focus:ring-mint-300 dark:focus:ring-mint-700 focus:border-mint-500 dark:focus:border-mint-400
                     transition-all duration-200 ease-in-out placeholder-zinc-500 dark:placeholder-zinc-400 font-medium tracking-wider"
               aria-label="Full Name" required>
      </div>

      <div>
        <label for="email-address" class="block text-sm font-bold text-zinc-700 dark:text-zinc-300 mb-2 uppercase tracking-tight">
          Email Address
        </label>
        <input type="email" id="email-address" placeholder="[email protected]" class="w-full p-3 bg-zinc-100 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200
                     border-2 border-zinc-300 dark:border-zinc-600 rounded-md
                     focus:outline-none focus:ring-4 focus:ring-mint-300 dark:focus:ring-mint-700 focus:border-mint-500 dark:focus:border-mint-400
                     transition-all duration-200 ease-in-out placeholder-zinc-500 dark:placeholder-zinc-400 font-medium tracking-wider"
               aria-label="Email Address" required>
      </div>

      <div>
        <label for="password" class="block text-sm font-bold text-zinc-700 dark:text-zinc-300 mb-2 uppercase tracking-tight">
          Password
        </label>
        <input type="password" id="password" placeholder="Minimum 8 characters" class="w-full p-3 bg-zinc-100 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200
                     border-2 border-zinc-300 dark:border-zinc-600 rounded-md
                     focus:outline-none focus:ring-4 focus:ring-mint-300 dark:focus:ring-mint-700 focus:border-mint-500 dark:focus:border-mint-400
                     transition-all duration-200 ease-in-out placeholder-zinc-500 dark:placeholder-zinc-400 font-medium tracking-wider"
               aria-label="Password" required>
      </div>

      <div>
        <label for="confirm-password" class="block text-sm font-bold text-zinc-700 dark:text-zinc-300 mb-2 uppercase tracking-tight">
          Confirm Password
        </label>
        <input type="password" id="confirm-password" placeholder="Repeat your password" class="w-full p-3 bg-zinc-100 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200
                     border-2 border-zinc-300 dark:border-zinc-600 rounded-md
                     focus:outline-none focus:ring-4 focus:ring-mint-300 dark:focus:ring-mint-700 focus:border-mint-500 dark:focus:border-mint-400
                     transition-all duration-200 ease-in-out placeholder-zinc-500 dark:placeholder-zinc-400 font-medium tracking-wider"
               aria-label="Confirm Password" required>
      </div>

      <div class="flex items-start">
        <input id="terms-and-conditions" type="checkbox" class="h-5 w-5 rounded-sm text-pink-500 dark:text-pink-600 bg-zinc-100 dark:bg-zinc-700
                      border-2 border-zinc-300 dark:border-zinc-600 focus:ring-4 focus:ring-mint-300 dark:focus:ring-mint-700 checked:bg-pink-500 dark:checked:bg-pink-600
                      transition-all duration-200 ease-in-out cursor-pointer">
        <label for="terms-and-conditions" class="ml-3 block text-sm text-zinc-600 dark:text-zinc-400 font-medium tracking-wide cursor-pointer">
          I agree to the
          <a href="#" class="text-pink-500 dark:text-pink-400 hover:underline hover:text-pink-700 dark:hover:text-pink-300 transition-colors duration-200">Terms & Conditions</a>
        </label>
      </div>

      <button type="submit" class="w-full py-3 px-6 rounded-md
                      bg-pink-500 text-white dark:bg-pink-600 dark:text-white
                      font-extrabold text-lg uppercase tracking-widest
                      border-b-4 border-r-4 border-pink-700 dark:border-pink-800
                      hover:bg-pink-600 dark:hover:bg-pink-700
                      active:translate-y-0.5 active:translate-x-0.5 active:border-0 active:border-b-0 active:border-r-0
                      focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700
                      transition-all duration-200 ease-in-out shadow-lg hover:shadow-xl"
              aria-label="Register">
        Register
      </button>
    </form>

    <div class="mt-8 text-center text-zinc-600 dark:text-zinc-400 text-sm">
      Already have an account?
      <a href="#" class="text-mint-500 dark:text-mint-400 hover:underline hover:text-mint-700 dark:hover:text-mint-300 transition-colors duration-200 font-bold">
        Log In
      </a>
    </div>

    <div class="mt-8 text-center text-zinc-500 dark:text-zinc-600 text-xs italic opacity-80">
      <p>Building a better tomorrow, one sweet step at a time.</p>
    </div>
  </div>
</div>

Search Components

Categories

Registration Form