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.
HTML Code
<!-- Password Reset Card Container -->
<div class="max-w-md mx-auto my-8 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300">
<!-- Header with Icon -->
<div class="text-center mb-6">
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-purple-100 dark:bg-purple-900 mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-600 dark:text-purple-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
</svg>
</div>
<h1 class="text-2xl font-bold text-gray-800 dark:text-white">Reset Password</h1>
<p class="text-gray-600 dark:text-gray-300 mt-2">Enter your email to receive a password reset link</p>
</div>
<!-- Form -->
<form class="space-y-4">
<!-- Email Input -->
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
</svg>
</div>
<input id="email" type="email" class="pl-10 w-full py-2 px-4 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 focus:border-transparent dark:text-white transition-colors duration-200" placeholder="[email protected]" required>
</div>
</div>
<!-- Submit Button -->
<button type="submit" class="w-full py-2 px-4 bg-purple-600 hover:bg-purple-700 focus:ring-purple-500 focus:ring-offset-purple-200 text-white font-medium rounded-md transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
Send Reset Link
</button>
<!-- Additional Info -->
<div class="text-center mt-4">
<p class="text-sm text-gray-600 dark:text-gray-400">
Remember your password?
<a href="#" class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 font-medium transition-colors duration-200">
Sign in
</a>
</p>
</div>
</form>
<!-- Security Note -->
<div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p>We'll send a secure link valid for 30 minutes</p>
</div>
</div>
</div>Composants associés
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.
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.
Réinitialisation de mot de passe Composant brutalisme Complexe Tableau de bord analogue
Un composant de réinitialisation de mot de passe de style brutaliste pour un tableau de bord, doté d’une mise en page complexe, d’une palette de couleurs analogue, d’une réactivité et d’une prise en charge du mode sombre.