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

Composant de réinitialisation de mot de passe avec style Neumorphisme, Schéma de couleurs complémentaire, Complexité complexe, à des fins de médias sociaux, à l’aide de Tailwind CSS. Conception réactive avec prise en charge du thème sombre.

Ouvrir

Composant de réinitialisation de mot de passe

Composant de réinitialisation de mot de passe avec un design rétro/vintage, une palette de couleurs de tons de terre et un niveau de complexité complexe, à des fins commerciales/d’entreprise, à l’aide de Tailwind CSS. Conception réactive avec prise en charge du thème sombre. Pas besoin de code JavaScript, seulement du HTML avec des classes Tailwind. Utilisation de picsum.photos pour les images et de randomuser.me pour les avatars.

Ouvrir

Composant de réinitialisation de mot de passe

Un composant de réinitialisation de mot de passe dynamique de style 3D pour les blogs et la consommation de contenu. Il prend en charge le thème sombre et est riche en éléments interactifs.

Ouvrir