Composants Réinitialisation du mot de passe Composant de réinitialisation de mot de passe

Composant de réinitialisation de mot de passe

Composant de réinitialisation de mot de passe skeuomorphique pour les médias sociaux avec schéma de couleurs analogue et prise en charge du mode sombre.

Aperçu

HTML Code

<div class="min-h-screen py-6 flex flex-col justify-center sm:py-12 bg-gradient-to-br from-blue-100 via-blue-200 to-cyan-100 dark:from-gray-800 dark:via-gray-900 dark:to-black">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div class="absolute inset-0 bg-gradient-to-r from-blue-400 to-cyan-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl dark:from-gray-700 dark:to-gray-900"></div>
    <div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20 dark:bg-gray-800">
      <div class="max-w-md mx-auto">
        <div>
          <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">Password Reset</h1>
        </div>
        <div class="divide-y divide-gray-200 dark:divide-gray-700">
          <div class="py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7 dark:text-gray-200">
            <p>Enter your email to receive a password reset link.</p>
            <div class="relative">
              <input autocomplete="off" id="email" name="email" type="text" class="peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 text-gray-900 focus:outline-none focus:borer-rose-600 dark:border-gray-600 dark:text-gray-100 dark:focus:border-blue-500" placeholder="Email address" />
              <label for="email" class="absolute left-0 -top-3.5 text-gray-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-440 peer-placeholder-shown:top-2 transition-all dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500">Email Address</label>
            </div>
            <div class="relative">
              <button class="bg-blue-500 text-white rounded-md px-2 py-1 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 shadow-md">Reset Password</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Composants associés

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

Composant de réinitialisation de mot de passe

Un composant de réinitialisation de mot de passe au design minimaliste et plat avec des tons de terre, un design réactif et une prise en charge du thème sombre, adapté au contenu du blog.

Ouvrir

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