Rechercher des composants

Catégories

Composants Formulaire d’inscription

Formulaire d’inscription

Formulaire de création de nouveaux comptes utilisateurs

Composant du formulaire d’inscription

Un composant de formulaire d’inscription réactif conçu avec un style neumorphique utilisant des couleurs sourdes/désaturées, adapté à un environnement de tableau de bord. Il inclut la prise en charge du mode sombre et utilise des ombres subtiles pour créer un effet extrudé.

Ouvrir Aperçu

                <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>

Composant du formulaire d’inscription - Thème musical/audio

Un composant de formulaire d’inscription épuré et minimaliste avec un style typographique suisse/international et une palette de couleurs automnales, conçu pour les plateformes musicales/audio. Il est entièrement réactif, prend en charge le mode sombre et utilise le HTML sémantique.

Ouvrir Aperçu

                <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>

Composant du formulaire d’inscription

Un composant de formulaire d’inscription réactif avec un style de conception de neumorphisme et une palette de couleurs néon/électrique, prenant en charge le mode sombre. Conçu pour le conseil/les services.

Ouvrir Aperçu

                <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>

Composant du formulaire d’inscription

Un composant de formulaire d’inscription complexe et réactif pour les applications financières/bancaires, doté d’un design épuré et minimaliste avec des couleurs très contrastées, une typographie forte et une mise en page basée sur une grille. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Formulaire d’inscription Art Déco

Un composant de formulaire d’inscription réactif avec une esthétique Art déco, une palette de couleurs à contraste élevé et une prise en charge du mode sombre, adapté aux sites Web gouvernementaux ou de services publics.

Ouvrir Aperçu

                <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>

Composant du formulaire d’inscription

Un formulaire d’inscription simple et réactif pour une place de marché avec un style de design industriel, une palette de couleurs neutres chaudes et une prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Composant du formulaire d’inscription

Un composant de formulaire d’inscription simple et réactif avec des effets de néon/lueur, une palette de couleurs neutres froides et une prise en charge du mode sombre, adapté aux sites Web liés à la photographie.

Ouvrir Aperçu

                <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>

Composant du formulaire d’inscription

Un composant de formulaire d’inscription complexe et réactif avec un schéma de couleurs dégradé forêt/vert, des transitions fluides et une prise en charge du mode sombre, adapté aux plates-formes éducatives.

Ouvrir Aperçu

                <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>

Composant du formulaire d’inscription

Un composant de formulaire de réservation/inscription réactif avec une interface utilisateur en mode sombre et une palette de couleurs néon/électrique, conçu pour les systèmes de rendez-vous et de réservation.

Ouvrir Aperçu

                <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>

Composant du formulaire d’inscription

Un composant de formulaire d’inscription réactif avec une palette de couleurs à la fois industrielle et sucrée, adapté aux organisations à but non lucratif / caritatives, avec des éléments exposés et une esthétique utilitaire.

Ouvrir Aperçu

                <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>