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 avec conception Skeuomorphism, effets réactifs et prise en charge du thème sombre.

Aperçu

HTML Code

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="p-8 bg-white dark:bg-gray-800 rounded-xl shadow-neumorphic dark:shadow-neumorphic-dark w-full max-w-md">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Reset Password</h2>
    <form>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email Address</label>
        <input type="email" id="email" class="shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline bg-gray-200 dark:bg-gray-700" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">New Password</label>
        <input type="password" id="password" class="shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline bg-gray-200 dark:bg-gray-700" placeholder="Enter your new password">
      </div>
      <div class="mb-6">
        <label for="confirm-password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Confirm New Password</label>
        <input type="password" id="confirm-password" class="shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline bg-gray-200 dark:bg-gray-700" placeholder="Confirm your new password">
      </div>
      <div class="flex items-center justify-between">
        <button type="button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline shadow-neumorphic-pressed dark:shadow-neumorphic-pressed-dark">
          Reset Password
        </button>
      </div>
    </form>
  </div>
</div>

<style>
  .shadow-neumorphic {
    box-shadow: 5px 5px 10px #cbced1, -5px -5px 10px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 5px 5px 10px #1a202c, -5px -5px 10px #2d3748;
  }

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

  .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 5px 5px 10px #1a202c, inset -5px -5px 10px #2d3748;
  }

    .shadow-neumorphic-pressed {
    box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
  }

  .dark .shadow-neumorphic-pressed-dark {
    box-shadow: inset 5px 5px 10px #1a202c, inset -5px -5px 10px #2d3748;
  }
</style>

Composants associés

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 inspiré de Material Design pour les plateformes de médias sociaux construit avec Tailwind CSS. Dispose d’une palette de couleurs vibrantes avec des couleurs à haute saturation, d’une mise en page épurée et d’un design réactif avec prise en charge du mode sombre. Le composant comprend des champs de saisie pour l’e-mail, un bouton d’envoi et un texte utile. La conception utilise des principes de conception matérielle tels que l’élévation de la carte, la disposition de la grille et les effets de profondeur.

Ouvrir

Composant de réinitialisation de mot de passe

Composant de réinitialisation de mot de passe réactif avec prise en charge du mode sombre

Ouvrir