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 simple de réinitialisation de mot de passe conçu à l’aide des principes de conception matérielle avec un jeu de couleurs en niveaux de gris. Il est réactif et prend en charge le mode sombre.
Composant de réinitialisation de mot de passe
Un composant de réinitialisation de mot de passe minimaliste avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant de réinitialisation de mot de passe
Un composant de réinitialisation de mot de passe conçu avec un style skeuomorphe, utilisant des tons de terre pour une esthétique naturelle et structuré pour les applications de tableau de bord. Il prend en charge le mode sombre et est réactif.