Composant de réinitialisation de mot de passe
Un composant de réinitialisation de mot de passe réactif avec un design « inspiré du papier/de l’impression », des « couleurs bonbons/douces » et la prise en charge du mode sombre, adapté aux entreprises industrielles et manufacturières.
HTML Code
<div class="min-h-screen bg-pink-100 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8">
<div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform perspective-1000 -rotate-x-1 sm:-rotate-x-2 -skew-y-0.5 sm:-skew-y-1 transition-all duration-300 ease-in-out
border-4 border-dashed border-pink-300 dark:border-pink-600
flex flex-col items-center p-8 sm:p-10 relative">
<!-- Paper-like background texture (subtle) -->
<div class="absolute inset-0 bg-repeat opacity-10 dark:opacity-5" style="background-image: url('data:image/svg+xml;utf8,<svg viewBox=\'0 0 10 10\' xmlns=\'http://www.w3.org/2000/svg\'><circle cx=\'1\' cy=\'1\' r=\'.5\' fill=\'%23ccc\'/><circle cx=\'6\' cy=\'6\' r=\'.5\' fill=\'%23ccc\'/></svg>'); background-size: 10px 10px;"></div>
<!-- Page Curl Effect (top right) -->
<div class="absolute top-0 right-0 w-24 h-24 rounded-bl-full bg-pink-200 dark:bg-pink-700 opacity-70" style="clip-path: polygon(0 0, 100% 0, 100% 100%); transform: translate(25%, -25%) rotate(45deg);")></div>
<div class="relative z-10 w-full">
<h2 class="text-3xl sm:text-4xl font-extrabold text-pink-700 dark:text-pink-300 mb-4 text-center tracking-tight leading-tight" style="font-family: 'Georgia', serif;">
Reset Password
</h2>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 mb-8 text-center leading-relaxed font-light">
Enter your new password below. Make sure it's strong and unique.
</p>
<form class="space-y-6">
<div>
<label for="new-password" class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-1">
New Password
</label>
<div class="relative">
<input
type="password"
id="new-password"
name="new-password"
required
class="appearance-none block w-full px-4 py-3 border border-pink-300 dark:border-pink-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500
focus:outline-none focus:ring-2 focus:ring-mint-500 focus:border-mint-500
bg-pink-50 dark:bg-gray-700 text-gray-900 dark:text-white sm:text-base"
placeholder="••••••••"
>
<span class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 dark:text-gray-400">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
</span>
</div>
</div>
<div>
<label for="confirm-password" class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-1">
Confirm Password
</label>
<div class="relative">
<input
type="password"
id="confirm-password"
name="confirm-password"
required
class="appearance-none block w-full px-4 py-3 border border-pink-300 dark:border-pink-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500
focus:outline-none focus:ring-2 focus:ring-mint-500 focus:border-mint-500
bg-pink-50 dark:bg-gray-700 text-gray-900 dark:text-white sm:text-base"
placeholder="••••••••"
>
<span class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 dark:text-gray-400">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
</span>
</div>
</div>
<div>
<button
type="submit"
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold
bg-mint-500 hover:bg-mint-600 dark:bg-mint-600 dark:hover:bg-mint-700 text-white
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-mint-500 dark:focus:ring-offset-gray-800
transform hover:scale-105 transition-all duration-200 ease-in-out
tracking-wide"
>
Reset Password
</button>
</div>
</form>
<p class="mt-8 text-center text-sm text-gray-500 dark:text-gray-400">
<a href="#" class="font-medium text-pink-600 hover:text-pink-800 dark:text-pink-400 dark:hover:text-pink-200 transition-colors duration-200">
Go back to login
</a>
</p>
</div>
</div>
</div>Composants associés
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.
Composant de réinitialisation de mot de passe - Glassmorphism Grayscale
Un composant de réinitialisation de mot de passe sur le thème du glassmorphism avec une palette de couleurs en niveaux de gris, avec des champs de saisie et des boutons translucides semblables à du verre dépoli. Conçu pour la réactivité et inclut la prise en charge du mode sombre. Bien que le but soit la météo/le climat, le formulaire de réinitialisation du mot de passe lui-même est générique.
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.