Composant de réinitialisation de mot de passe
Un composant de réinitialisation de mot de passe réactif avec la conception Neumorphism, la prise en charge du mode sombre et pas de JavaScript.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-800 p-6">
<div class="max-w-sm w-full bg-gray-200 dark:bg-gray-800 p-8 rounded-xl shadow-neumorphic dark:shadow-neumorphic-dark">
<h2 class="text-2xl font-bold text-center text-gray-700 dark:text-gray-200 mb-6">Reset Password</h2>
<form>
<div class="mb-6">
<label for="email" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Email Address</label>
<input type="email" id="email" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 text-gray-700 dark:text-gray-200 shadow-neumorphic-input dark:shadow-neumorphic-input-dark" placeholder="Enter your email">
</div>
<div class="mb-6">
<label for="password" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">New Password</label>
<input type="password" id="password" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 text-gray-700 dark:text-gray-200 shadow-neumorphic-input dark:shadow-neumorphic-input-dark" placeholder="Enter new password">
</div>
<div class="mb-6">
<label for="confirm-password" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Confirm New Password</label>
<input type="password" id="confirm-password" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 text-gray-700 dark:text-gray-200 shadow-neumorphic-input dark:shadow-neumorphic-input-dark" placeholder="Confirm new password">
</div>
<button type="submit" class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-600 dark:focus:ring-opacity-50 shadow-neumorphic-button dark:shadow-neumorphic-button-dark">
Reset Password
</button>
</form>
</div>
</div>
<style>
.shadow-neumorphic {
box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 5px 5px 10px #717171, -5px -5px 10px #999999;
}
.shadow-neumorphic-input {
box-shadow: inset 3px 3px 5px #bebebe, inset -3px -3px 5px #ffffff;
}
.dark .shadow-neumorphic-input-dark {
box-shadow: inset 3px 3px 5px #717171, inset -3px -3px 5px #999999;
}
.shadow-neumorphic-button {
box-shadow: 3px 3px 7px #bebebe, -3px -3px 7px #ffffff;
}
.dark .shadow-neumorphic-button-dark {
box-shadow: 3px 3px 7px #717171, -3px -3px 7px #999999;
}
</style>Composants associés
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.
Composant de réinitialisation de mot de passe
Un composant de réinitialisation de mot de passe avec Material Design, des couleurs vives, une complexité modérée et un objectif de commerce électronique. Il est réactif et prend en charge le thème sombre en utilisant Tailwind CSS. Aucun JavaScript n’est inclus.
Composant de réinitialisation de mot de passe
Composant de réinitialisation de mot de passe réactif avec une interface utilisateur en mode sombre, utilisant un jeu de couleurs analogue. Conçu pour les applications de commerce électronique.