Rechercher des composants

Catégories

Composants Réinitialisation du mot de passe

Réinitialisation du mot de passe

Processus de réinitialisation des mots de passe oubliés

Composant de réinitialisation de mot de passe

Un composant réactif de réinitialisation de mot de passe avec une conception monospace/développeur, une palette de couleurs d’automne et une esthétique de terminal, adapté aux applications de commerce électronique. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex min-h-screen items-center justify-center bg-stone-100 p-4 dark:bg-zinc-900 font-mono">
  <div class="w-full max-w-md rounded-lg border border-stone-300 bg-stone-50 p-6 shadow-xl dark:border-zinc-700 dark:bg-zinc-800 md:p-8">
    <div class="mb-6 flex items-center justify-between">
      <h2 class="text-2xl font-bold text-orange-800 dark:text-orange-400">Reset Password</h2>
      <span class="text-sm text-stone-600 dark:text-zinc-400">< KeyVault /></span>
    </div>

    <p class="mb-6 text-sm leading-relaxed text-stone-700 dark:text-zinc-300">
      Forgot your password? No problem. Enter your account email below and we'll send you a password reset link.
    </p>

    <form action="#" method="POST">
      <div class="mb-4">
        <label for="email" class="mb-2 block text-sm font-medium text-stone-700 dark:text-zinc-300">
          <span class="text-orange-700 dark:text-orange-500">guest@</span>your-store:<span class="text-amber-700 dark:text-amber-500">~</span><span class="animate-pulse">_</span> Enter Email
        </label>
        <input
          type="email"
          id="email"
          name="email"
          autocomplete="email"
          required
          placeholder="[email protected]"
          class="w-full rounded-md border border-stone-400 bg-stone-200 px-3 py-2 text-stone-900 placeholder:text-stone-500 focus:border-orange-600 focus:outline-none focus:ring-1 focus:ring-orange-600 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-100 dark:placeholder:text-zinc-400 dark:focus:border-orange-500 dark:focus:ring-orange-500 text-sm md:text-base"
        />
      </div>

      <div class="mb-6 flex items-center justify-between text-xs md:text-sm">
        <div class="flex items-center">
          <input
            id="remember-me"
            name="remember-me"
            type="checkbox"
            class="h-4 w-4 rounded border-stone-500 bg-stone-300 text-orange-600 focus:ring-orange-500 dark:border-zinc-500 dark:bg-zinc-600 dark:checked:bg-orange-600"
          />
          <label for="remember-me" class="ml-2 text-stone-700 dark:text-zinc-300">
            <span class="text-orange-700 dark:text-orange-500">root@</span>cache:<span class="text-amber-700 dark:text-amber-500">/var/log</span> Remember Device
          </label>
        </div>
        <a href="#" class="font-medium text-orange-700 hover:text-orange-600 dark:text-orange-500 dark:hover:text-orange-400">
          <span class="text-orange-700 dark:text-orange-500">sudo</span> View Log
        </a>
      </div>

      <button
        type="submit"
        class="w-full rounded-md bg-orange-700 px-4 py-2 font-semibold text-white shadow-sm hover:bg-orange-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-700 transition-colors dark:bg-orange-600 dark:hover:bg-orange-500 text-sm md:text-base"
      >
        <span class="text-amber-200">./</span>send-reset-link.sh
      </button>
    </form>

    <div class="mt-8 border-t border-stone-300 pt-6 text-center text-sm dark:border-zinc-700">
      <p class="text-stone-700 dark:text-zinc-300">
        <span class="text-orange-700 dark:text-orange-500">$</span> Already have an account? 
        <a href="#" class="font-medium text-orange-700 hover:text-orange-600 dark:text-orange-500 dark:hover:text-orange-400">Login instead</a>
      </p>
      <p class="mt-2 text-stone-600 dark:text-zinc-400">
        <span class="text-orange-700 dark:text-orange-500">~</span> Need assistance? <a href="#" class="font-medium text-orange-700 hover:text-orange-600 dark:text-orange-500 dark:hover:text-orange-400">Ping Support</a>
      </p>
    </div>
  </div>
</div>

Composant de réinitialisation de mot de passe

Un composant de réinitialisation de mot de passe minimaliste et réactif avec des tons océan/bleu, conçu pour les plateformes de marché, y compris la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen flex items-center justify-center p-4 bg-blue-50 dark:bg-gray-900 transition-colors duration-300">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 space-y-6 border border-blue-100 dark:border-gray-700 transition-all duration-300 transform md:scale-105 lg:scale-100 xl:scale-95">
    <div class="text-center">
      <h1 class="text-3xl font-extrabold text-blue-800 dark:text-blue-300 mb-2">Reset Your Password</h1>
      <p class="text-gray-600 dark:text-gray-400 text-sm">Enter your new password below.</p>
    </div>

    <form class="space-y-6">
      <div>
        <label for="new-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">New Password</label>
        <input type="password" id="new-password" name="new-password" required class="w-full px-4 py-2 border border-blue-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-blue-50 dark:bg-gray-700 transition-colors duration-200" placeholder="••••••••">
      </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" required class="w-full px-4 py-2 border border-blue-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-blue-50 dark:bg-gray-700 transition-colors duration-200" placeholder="••••••••">
      </div>

      <button type="submit" class="w-full flex justify-center py-2 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 transition-colors duration-200">
        Reset Password
      </button>
    </form>

    <div class="text-center text-sm">
      <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">Back to sign in</a>
    </div>
  </div>
</div>

Composant de réinitialisation de mot de passe

Un composant de réinitialisation de mot de passe propre et fiable, conçu pour les sites d’actualités et de médias d’entreprise/professionnels, avec des neutres chauds, une réactivité et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 sm:p-8 border border-gray-200 dark:border-gray-700">
    <div class="text-center mb-6 sm:mb-8">
      <h1 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-2">Reset Your Password</h1>
      <p class="text-sm text-gray-600 dark:text-gray-400">Enter your email address to receive a password reset link.</p>
    </div>
    <form>
      <div class="mb-4">
        <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]" class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-400 sm:text-sm text-gray-900 bg-gray-50">
      </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-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-amber-700 dark:hover:bg-amber-600 dark:focus:ring-offset-gray-800">
        Send Reset Link
      </button>
    </form>
    <div class="mt-6 text-center text-sm">
      <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400">
        Remember your password? Log in
      </a>
    </div>
  </div>
</div>

Composant de réinitialisation de mot de passe

Un composant complexe de réinitialisation de mot de passe conçu pour les services gouvernementaux/publics, avec un design épuré et minimaliste basé sur la typographie avec des couleurs à contraste élevé et une réactivité totale, y compris la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col justify-center py-12 sm:px-6 lg:px-8 font-sans transition-colors duration-200">
    <div class="sm:mx-auto sm:w-full sm:max-w-md">
        <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-gray-100 leading-tight tracking-tight sm:text-4xl">
            Reset Your Password
        </h2>
        <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400 max-w-sm mx-auto">
            Enter your email address below to receive a password reset link.
        </p>
    </div>

    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div class="bg-white dark:bg-gray-800 py-8 px-4 shadow-lg rounded-lg sm:px-10 border border-gray-200 dark:border-gray-700">
            <form class="space-y-6" action="#" method="POST">
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Email address
                    </label>
                    <div class="mt-1 relative rounded-md shadow-sm">
                        <input id="email" name="email" type="email" autocomplete="email" required
                            class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 pr-10">
                        <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                            <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M2.5 7A.5.5 0 013 6.5h14a.5.5 0 01.5.5v1.5a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V7zm0 4.5A.5.5 0 013 11h14a.5.5 0 01.5.5v1.5a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5v-1.5z" clip-rule="evenodd" />
                                <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 011 1v12a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM4.5 5.5a.5.5 0 00-.5.5v9a.5.5 0 00.5.5h11a.5.5 0 00.5-.5v-9a.5.5 0 00-.5-.5h-11z" clip-rule="evenodd" />
                            </svg>
                        </div>
                    </div>
                </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-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-900 transition duration-150 ease-in-out">
                        Send reset link
                    </button>
                </div>
            </form>

            <div class="mt-6">
                <div class="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 dark:bg-gray-800 text-gray-500 dark:text-gray-400">
                            Or
                        </span>
                    </div>
                </div>

                <div class="mt-6 space-y-4">
                    <a href="#" class="w-full flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md 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-indigo-500 dark:focus:ring-offset-gray-900 transition duration-150 ease-in-out">
                        <svg class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM6.75 9.25a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z" clip-rule="evenodd" />
                        </svg>
                        Back to Login
                    </a>
                    <a href="#" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/50 hover:bg-blue-100 dark:hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 transition duration-150 ease-in-out">
                        <svg class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M18 10h-1.26A8 8 0 1010 4.09"></path>
                            <path d="M20.25 7.5l-2.75-2.75L15 7.5"></path>
                        </svg>
                        Contact Support
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Composant de réinitialisation de mot de passe

Un composant complexe et réactif de réinitialisation de mot de passe avec un design « Organique/Inspiré de la nature », une palette de couleurs « Coucher de soleil/Tons chauds », adapté aux outils CRM/Business. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-amber-50 to-orange-100 dark:from-gray-900 dark:to-gray-800 transition-colors duration-500 font-sans">
  <div class="relative w-full max-w-md mx-auto p-8 bg-white dark:bg-gray-850 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-500 scale-100 hover:scale-105 group border border-amber-200 dark:border-gray-700">
    <!-- Organic background shapes -->
    <div class="absolute -top-10 -left-10 w-48 h-48 bg-amber-200 dark:bg-amber-800 rounded-full mix-blend-multiply opacity-30 blur-xl group-hover:scale-125 transition-transform duration-700"></div>
    <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-orange-200 dark:bg-orange-800 rounded-full mix-blend-multiply opacity-30 blur-xl group-hover:scale-125 transition-transform duration-700"></div>
    <div class="absolute top-1/4 left-1/4 w-32 h-32 bg-yellow-100 dark:bg-yellow-800 rounded-full mix-blend-overlay opacity-20 blur-xl group-hover:scale-125 transition-transform duration-700"></div>

    <div class="relative z-10 space-y-8">
      <div class="text-center">
        <h2 class="text-3xl font-extrabold text-amber-800 dark:text-amber-300 mb-2 leading-tight tracking-tight drop-shadow-sm">
          Reset Your Password
        </h2>
        <p class="text-orange-600 dark:text-orange-200 text-sm md:text-base leading-relaxed">
          Enter your new password below. Ensure it's strong and unique.
        </p>
      </div>

      <form class="space-y-6">
        <div>
          <label for="new-password" class="block text-sm font-medium text-orange-700 dark:text-orange-300 mb-1">
            New Password
          </label>
          <div class="relative">
            <input
              type="password"
              id="new-password"
              name="new-password"
              required
              class="w-full px-4 py-2 rounded-xl border border-amber-300 dark:border-gray-700 focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400 focus:border-transparent outline-none transition-all duration-300 text-orange-800 dark:text-white bg-amber-50 dark:bg-gray-700 placeholder-orange-300 dark:placeholder-gray-400 shadow-sm"
              placeholder="••••••••"
            >
            <span class="absolute inset-y-0 right-0 pr-3 flex items-center text-orange-400 dark:text-gray-400">
              <!-- Placeholder for an eye icon -->
              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
              </svg>
            </span>
          </div>
          <p class="mt-2 text-xs text-orange-500 dark:text-orange-400">
            Minimum 8 characters, including a capital letter and a number.
          </p>
        </div>

        <div>
          <label for="confirm-password" class="block text-sm font-medium text-orange-700 dark:text-orange-300 mb-1">
            Confirm Password
          </label>
          <div class="relative">
            <input
              type="password"
              id="confirm-password"
              name="confirm-password"
              required
              class="w-full px-4 py-2 rounded-xl border border-amber-300 dark:border-gray-700 focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400 focus:border-transparent outline-none transition-all duration-300 text-orange-800 dark:text-white bg-amber-50 dark:bg-gray-700 placeholder-orange-300 dark:placeholder-gray-400 shadow-sm"
              placeholder="••••••••"
            >
             <span class="absolute inset-y-0 right-0 pr-3 flex items-center text-orange-400 dark:text-gray-400">
              <!-- Placeholder for an eye icon -->
              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
              </svg>
            </span>
          </div>
        </div>

        <button
          type="submit"
          class="w-full px-6 py-3 rounded-full bg-gradient-to-r from-orange-500 to-amber-700 text-white font-semibold text-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-600 focus:ring-opacity-75 relative overflow-hidden group"
        >
          <span class="relative z-10">
            Reset Password
          </span>
          <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
        </button>
      </form>

      <div class="text-center text-sm">
        <p class="text-orange-600 dark:text-orange-200">
          Remember your password?
          <a href="#" class="font-medium text-amber-700 dark:text-amber-300 hover:text-amber-900 dark:hover:text-amber-100 transition-colors duration-200">
            Log In
          </a>
        </p>
      </div>
    </div>
  </div>
</div>

Composant de réinitialisation de mot de passe - Glassmorphism Grayscale

Un composant de réinitialisation de mot de passe sur le thème du glassmorphism avec une palette de couleurs en niveaux de gris, avec des champs de saisie et des boutons translucides semblables à du verre dépoli. Conçu pour la réactivité et inclut la prise en charge du mode sombre. Bien que le but soit la météo/le climat, le formulaire de réinitialisation du mot de passe lui-même est générique.

Ouvrir Aperçu

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 duration-300">
  <div class="w-full max-w-md p-8 rounded-xl shadow-2xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 border border-gray-200 border-opacity-30 dark:border-gray-700 dark:border-opacity-30 transform transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-3xl">
    <h2 class="text-3xl font-extrabold text-center text-gray-800 dark:text-gray-100 mb-6 drop-shadow-md">Reset Password</h2>
    <p class="text-center text-gray-700 dark:text-gray-300 mb-8 max-w-sm mx-auto drop-shadow-sm">Enter your email address below and we'll send you a link to reset your password.</p>

    <form class="space-y-6">
      <div>
        <label for="email" class="sr-only">Email address</label>
        <input id="email" name="email" type="email" autocomplete="email" required class="block w-full px-5 py-3 rounded-lg text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 bg-white bg-opacity-50 dark:bg-gray-700 dark:bg-opacity-50 border border-gray-300 border-opacity-50 dark:border-gray-600 dark:border-opacity-50 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 focus:border-transparent transition-all duration-300 ease-in-out shadow-sm"
          placeholder="[email protected]">
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-3 px-6 border border-transparent rounded-lg shadow-sm text-lg font-semibold text-white bg-gray-700 bg-opacity-80 dark:bg-gray-600 dark:bg-opacity-80 hover:bg-gray-800 hover:bg-opacity-90 dark:hover:bg-gray-700 dark:hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900 transition-all duration-300 ease-in-out transform active:scale-95">
          Send Reset Link
        </button>
      </div>
    </form>

    <div class="mt-8 text-center">
      <p class="text-sm text-gray-600 dark:text-gray-400">
        Remember your password?
        <a href="#" class="font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 focus:rounded-sm">
          Log in
        </a>
      </p>
    </div>
  </div>
</div>

Composant de réinitialisation de mot de passe

Un composant de réinitialisation de mot de passe minimaliste et réactif avec des tons crépuscules/chauds, adapté aux sites Web de restauration/restaurants, y compris la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-orange-50 to-red-100 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-700 rounded-lg shadow-xl p-8 space-y-6 transform transition-all duration-300 hover:shadow-2xl">
    <div class="text-center">
      <h2 class="mt-2 text-3xl font-extrabold text-orange-600 dark:text-orange-400 capitalize drop-shadow-sm">Reset Your Password</h2>
      <p class="mt-2 text-sm text-gray-500 dark:text-gray-300">Enter your email address to receive a password reset link.</p>
    </div>

    <form class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Email address</label>
        <div class="mt-1">
          <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-transparent focus:border-orange-500 dark:focus:border-orange-400 sm:text-sm bg-gray-50 dark:bg-gray-600 text-gray-900 dark:text-white transition-colors duration-200 ease-in-out">
        </div>
      </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-orange-600 hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-700 dark:focus:ring-orange-500 transition-colors duration-200 ease-in-out transform hover:scale-105 active:scale-95">
          Send Reset Link
        </button>
      </div>
    </form>

    <div class="mt-6 text-center">
      <p class="text-sm">
        <a href="#" class="font-medium text-orange-600 hover:text-orange-500 dark:text-orange-400 dark:hover:text-orange-300">
          Remembered your password? Log In
        </a>
      </p>
    </div>
  </div>
</div>

Composant de réinitialisation de mot de passe

Un composant de réinitialisation de mot de passe complexe et réactif avec un style de conception monospace/développeur, avec une palette de couleurs noir et blanc avec un accent vif. Conçu pour la documentation/les sites wiki, il inclut la prise en charge du mode sombre et du HTML sémantique.

Ouvrir Aperçu

                <div class="min-h-screen bg-neutral-50 font-mono text-gray-900 flex items-center justify-center p-4 sm:p-6 dark:bg-zinc-950 dark:text-gray-100">
  <div class="w-full max-w-md bg-stone-100 border border-neutral-300 rounded-lg shadow-xl overflow-hidden md:max-w-xl lg:max-w-2xl dark:bg-zinc-900 dark:border-zinc-800">
    <div class="flex flex-col md:flex-row">
      <div class="w-full p-6 sm:p-8 md:w-1/2 lg:w-2/5 md:flex md:flex-col md:justify-between dark:bg-zinc-800 dark:border-r dark:border-zinc-700">
        <div>
          <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-emerald-600 dark:text-emerald-400">//RESET_PASSWORD</h2>
          <p class="mb-6 text-sm text-gray-700 dark:text-gray-300">
            <span class="text-emerald-700 dark:text-emerald-500">&gt;</span> Enter your registered email address.
          </p>
          <p class="mb-6 text-sm text-gray-700 dark:text-gray-300">
            <span class="text-red-600 dark:text-red-400">!</span> A password reset link will be sent to your inbox. Check your spam folder if necessary.
          </p>
        </div>
        <div class="mt-8 md:mt-0">
          <p class="text-xs text-gray-500 dark:text-gray-400">
            <span class="text-emerald-600 dark:text-emerald-400">&gt;</span> System uptime: <span class="text-gray-700 dark:text-gray-300">234d 12h 34m 56s</span>
          </p>
          <p class="text-xs text-gray-500 dark:text-gray-400">
            <span class="text-emerald-600 dark:text-emerald-400">&gt;</span> Logged in as: <span class="text-gray-700 dark:text-gray-300">[email protected]</span>
          </p>
        </div>
      </div>

      <div class="w-full p-6 sm:p-8 md:w-1/2 lg:w-3/5 border-t border-neutral-300 md:border-t-0 md:border-l dark:border-zinc-800">
        <form class="space-y-6">
          <div>
            <label for="email" class="block text-xs font-medium text-gray-700 uppercase tracking-wider mb-1 dark:text-gray-300">
              user@domain:~$ _
            </label>
            <input
              type="email"
              id="email"
              name="email"
              autocomplete="email"
              required
              placeholder="[email protected]"
              class="appearance-none block w-full px-3 py-2 border border-gray-400 rounded-md shadow-sm placeholder-gray-500 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm bg-white dark:bg-zinc-700 dark:border-zinc-600 dark:text-gray-100 dark:placeholder-gray-400"
            />
          </div>

          <div class="flex items-start">
            <div class="flex items-center h-5">
              <input
                id="terms"
                name="terms"
                type="checkbox"
                class="focus:ring-emerald-500 h-4 w-4 text-emerald-600 border-gray-400 rounded dark:bg-zinc-700 dark:border-zinc-600"
              />
            </div>
            <div class="ml-3 text-sm">
              <label for="terms" class="font-medium text-gray-700 dark:text-gray-300">
                <span class="text-emerald-600 dark:text-emerald-400">[</span> I understand this action <span class="text-red-700 dark:text-red-500">cannot be undone</span> <span class="text-emerald-600 dark:text-emerald-400">]</span>
              </label>
            </div>
          </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-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:bg-emerald-700 dark:hover:bg-emerald-600 dark:focus:ring-emerald-600"
            >
              <span class="">EXECUTE_RESET_COMMAND</span>
              <span class="ml-2 text-white/50 dark:text-white/40">$PWD_RESET</span>
            </button>
          </div>

          <div class="text-center">
            <a href="#" class="text-sm text-emerald-600 hover:text-emerald-500 dark:text-emerald-400 dark:hover:text-emerald-300">
              <span class="text-emerald-600 dark:text-emerald-400">&lt;</span> Go back to login screen
            </a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Retro_Crypto_Password_Reset_Component

Un composant complexe de réinitialisation de mot de passe sur le thème rétro/vintage conçu pour les applications de crypto-monnaie et de blockchain, avec une interaction en plusieurs étapes, une mise en page réactive et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-900 text-gray-200 p-4 font-mono dark:from-gray-900 dark:via-black dark:to-gray-950">
  <div class="flex items-center justify-center min-h-screen">
    <div class="relative bg-gradient-to-br from-indigo-800 to-purple-800 border-4 border-purple-400 rounded-lg shadow-retro-glow p-8 w-full max-w-lg md:max-w-2xl lg:max-w-3xl transform -rotate-1 skew-x-1 transition-all duration-300 hover:rotate-0 hover:skew-x-0 dark:from-gray-800 dark:to-gray-900 dark:border-purple-600 dark:shadow-retro-glow-dark">
      <div class="absolute -top-4 -left-4 w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center text-xl font-bold border-2 border-purple-300 transform rotate-12 dark:bg-purple-700 dark:border-purple-500">Ω</div>
      <div class="absolute -bottom-4 -right-4 w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center text-xl font-bold border-2 border-purple-300 transform -rotate-12 dark:bg-purple-700 dark:border-purple-500">Ξ</div>

      <div class="text-center mb-8">
        <h1 class="text-4xl md:text-5xl font-extrabold text-yellow-300 uppercase leading-tight tracking-wider mb-2 drop-shadow-lg dark:text-yellow-400">
          [CRYPTO] Reset Protocol
        </h1>
        <p class="text-purple-200 text-lg md:text-xl italic">
          Accessing secured memory banks...
        </p>
      </div>

      <div class="relative bg-purple-900/50 p-6 rounded-md border border-purple-700 shadow-inner-glow dark:bg-gray-800/50 dark:border-gray-700">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <!-- Left Panel: Form Steps -->
          <div>
            <h2 class="text-2xl font-bold text-yellow-300 mb-4 dark:text-yellow-400">Authentication Sequence</h2>

            <!-- Step 1: Email/Username -->
            <div class="mb-6" id="step1">
              <label for="identifier" class="block text-purple-200 text-sm font-bold mb-2 uppercase tracking-wide">User ID / Wallet Alias</label>
              <input type="text" id="identifier" name="identifier" class="shadow-inner appearance-none border border-purple-600 rounded w-full py-3 px-4 text-purple-900 bg-purple-200 leading-tight focus:outline-none focus:shadow-outline focus:border-yellow-300 transition-colors duration-200 placeholder-purple-500 dark:text-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" placeholder="Enter your encrypted identity">
              <button class="mt-4 bg-yellow-500 hover:bg-yellow-600 text-purple-900 font-bold py-2 px-4 rounded transition-colors duration-200 shadow-md transform hover:scale-105 active:scale-95 dark:bg-yellow-600 dark:hover:bg-yellow-700" onclick="document.getElementById('step1').classList.add('hidden'); document.getElementById('step2').classList.remove('hidden');">Initiate Sequence</button>
            </div>

            <!-- Step 2: Verification Code (Hidden by default) -->
            <div class="hidden mb-6" id="step2">
              <label for="verification_code" class="block text-purple-200 text-sm font-bold mb-2 uppercase tracking-wide">Security Key Receive Protocol</label>
              <input type="text" id="verification_code" name="verification_code" class="shadow-inner appearance-none border border-purple-600 rounded w-full py-3 px-4 text-purple-900 bg-purple-200 leading-tight focus:outline-none focus:shadow-outline focus:border-yellow-300 transition-colors duration-200 placeholder-purple-500 dark:text-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" placeholder="Enter Alpha-numeric key">
              <p class="text-xs text-purple-300 mt-1">A 6-digit key has been dispatched to your registered relay point.</p>
              <button class="mt-4 bg-yellow-500 hover:bg-yellow-600 text-purple-900 font-bold py-2 px-4 rounded transition-colors duration-200 shadow-md transform hover:scale-105 active:scale-95 dark:bg-yellow-600 dark:hover:bg-yellow-700" onclick="document.getElementById('step2').classList.add('hidden'); document.getElementById('step3').classList.remove('hidden');">Validate Key</button>
            </div>

            <!-- Step 3: New Password (Hidden by default) -->
            <div class="hidden mb-6" id="step3">
              <label for="new_password" class="block text-purple-200 text-sm font-bold mb-2 uppercase tracking-wide">Input New Encryption Passphrase</label>
              <input type="password" id="new_password" name="new_password" class="shadow-inner appearance-none border border-purple-600 rounded w-full py-3 px-4 text-purple-900 bg-purple-200 leading-tight focus:outline-none focus:shadow-outline focus:border-yellow-300 transition-colors duration-200 placeholder-purple-500 dark:text-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" placeholder="Min 10 characters, mixed case, symbols">
              <p class="text-xs text-purple-300 mt-1">Ensure high entropy for secure re-initialization.</p>

              <label for="confirm_password" class="block text-purple-200 text-sm font-bold mb-2 mt-4 uppercase tracking-wide">Re-confirm Passphrase</label>
              <input type="password" id="confirm_password" name="confirm_password" class="shadow-inner appearance-none border border-purple-600 rounded w-full py-3 px-4 text-purple-900 bg-purple-200 leading-tight focus:outline-none focus:shadow-outline focus:border-yellow-300 transition-colors duration-200 placeholder-purple-500 dark:text-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" placeholder="Re-enter for verification">
              <button class="mt-6 bg-green-500 hover:bg-green-600 text-purple-900 font-bold py-2 px-4 rounded transition-colors duration-200 shadow-md transform hover:scale-105 active:scale-95 dark:bg-green-600 dark:hover:bg-green-700">Execute Re-initialization</button>
            </div>
          </div>

          <!-- Right Panel: Status/Info Display -->
          <div class="hidden md:block">
            <h2 class="text-2xl font-bold text-yellow-300 mb-4 dark:text-yellow-400">System Diagnostics</h2>
            <div class="bg-purple-800/70 p-4 rounded-md border border-purple-600 h-full flex flex-col justify-between dark:bg-gray-700/70 dark:border-gray-600">
              <div>
                <p class="text-purple-200 text-sm mb-2">Status: <span class="text-yellow-300 font-semibold">Awaiting Input</span></p>
                <p class="text-purple-200 text-sm mb-2">Session ID: <span class="text-purple-300">0x7a8b9c...</span></p>
                <p class="text-purple-200 text-sm mb-4">Last attempt: <span class="text-purple-300">2024.07.20 14:38 GMT</span></p>
                <hr class="border-purple-600 my-4 dark:border-gray-600">
                <p class="text-purple-200 text-sm italic">For security, all network traffic is encrypted with AES-256. Do NOT share your private keys or backup mnemonics with anyone, ever. Our support will NEVER ask for this information.</p>
              </div>
              <div class="mt-4 text-center">
                <img src="https://picsum.photos/150/100?random=1" alt="Retro abstract data stream" class="mx-auto rounded-md border border-purple-600 shadow-lg">
                <p class="text-xs text-purple-400 mt-2">['DATA_STREAM_VISUALIZER']</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-8 text-center text-purple-300 text-xs">
        <p>&copy; 2084 [CRYPTO] Corp. All network transmissions monitored.</p>
        <p class="mt-1"><a href="#" class="underline hover:text-yellow-300">Terms of Protocol</a> | <a href="#" class="underline hover:text-yellow-300">Data Security Policy</a></p>
      </div>
    </div>
  </div>
</div>

<style>
  /* Retro glow effect */
  .shadow-retro-glow {
    box-shadow: 
      0 0 5px rgba(255, 255, 255, 0.5),
      0 0 10px rgba(168, 85, 247, 0.7),
      0 0 20px rgba(168, 85, 247, 0.5),
      0 0 30px rgba(168, 85, 247, 0.3);
  }
  .dark .shadow-retro-glow-dark {
    box-shadow: 
      0 0 5px rgba(255, 255, 255, 0.3),
      0 0 10px rgba(192, 132, 252, 0.6),
      0 0 20px rgba(192, 132, 252, 0.4),
      0 0 30px rgba(192, 132, 252, 0.2);
  }
  /* Inner glow for panels */
  .shadow-inner-glow {
    box-shadow: inset 0 0 8px rgba(168, 85, 247, 0.5), inset 0 0 20px rgba(168, 85, 247, 0.2);
  }
  .dark .shadow-inner-glow {
    box-shadow: inset 0 0 8px rgba(192, 132, 252, 0.4), inset 0 0 20px rgba(192, 132, 252, 0.15);
  }

  /* Simple keyframe for subtle animation */
  @keyframes flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.9; }
  }
  .text-yellow-300 { animation: flicker 3s infinite ease-in-out; }
</style>

Composant de réinitialisation de mot de passe

Composant de réinitialisation de mot de passe de conception minimaliste / plate avec des tons de terre, adapté aux plateformes immobilières. Il dispose d’une mise en page réactive, d’une prise en charge du mode sombre et de plusieurs champs de saisie pour une interface complexe.

Ouvrir Aperçu

                <div class="min-h-screen bg-stone-100 flex items-center justify-center p-4 dark:bg-stone-900">
  <div class="max-w-md w-full bg-white p-8 rounded-lg shadow-xl dark:bg-stone-800 dark:text-stone-200 border border-stone-200 dark:border-stone-700">
    <div class="text-center mb-8">
      <h2 class="text-3xl font-bold text-stone-800 dark:text-stone-100 mb-2">Reset Your Password</h2>
      <p class="text-stone-600 dark:text-stone-400">Enter your new password below. It should be strong and unique.</p>
    </div>

    <form class="space-y-6">
      <div>
        <label for="new-password" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">New Password</label>
        <input type="password" id="new-password" name="new-password" required class="mt-1 block w-full px-4 py-2 bg-stone-50 border border-stone-300 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 sm:text-sm dark:bg-stone-700 dark:border-stone-600 dark:text-stone-100 dark:placeholder-stone-400">
        <p class="mt-2 text-sm text-stone-500 dark:text-stone-400">Must be at least 8 characters, with letters, numbers, and symbols.</p>
      </div>

      <div>
        <label for="confirm-password" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">Confirm New Password</label>
        <input type="password" id="confirm-password" name="confirm-password" required class="mt-1 block w-full px-4 py-2 bg-stone-50 border border-stone-300 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 sm:text-sm dark:bg-stone-700 dark:border-stone-600 dark:text-stone-100 dark:placeholder-stone-400">
      </div>

      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-amber-600 focus:ring-amber-500 border-stone-300 rounded dark:bg-stone-700 dark:border-stone-600 dark:checked:bg-amber-700">
          <label for="remember-me" class="ml-2 block text-sm text-stone-900 dark:text-stone-300">Remember me on this device</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-sm font-medium text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-amber-700 dark:hover:bg-amber-800 dark:focus:ring-offset-stone-800">
          Reset Password
        </button>
      </div>
    </form>

    <div class="mt-6 text-center text-sm">
      <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400">Back to login</a>
    </div>
  </div>
</div>