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.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-6">
<div class="w-full max-w-md bg-yellow-300 dark:bg-yellow-700 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] p-8 space-y-6">
<h2 class="text-2xl font-bold text-black dark:text-white uppercase border-b-4 border-black dark:border-white pb-4">Reset Password</h2>
<p class="text-black dark:text-white text-sm font-mono">Enter your email address to receive a password reset link. This action cannot be undone.</p>
<div class="space-y-4">
<div>
<label for="email" class="block text-sm font-bold text-black dark:text-white uppercase mb-2">Email Address</label>
<input type="email" id="email" class="w-full p-3 border-4 border-black dark:border-white bg-orange-300 dark:bg-orange-700 text-black dark:text-white focus:outline-none focus:ring-0 focus:border-black dark:focus:border-white" placeholder="[email protected]">
</div>
<div class="flex items-center">
<input type="checkbox" id="remember" class="h-5 w-5 text-black dark:text-white border- काले dark:border-white focus:ring-0 rounded-none">
<label for="remember" class="ml-2 block text-sm text-black dark:text-white font-mono">Remember me (not recommended on shared computers)</label>
</div>
</div>
<button class="w-full bg-red-500 hover:bg-red-700 text-white font-bold py-3 px-4 border-4 border-black dark:border-white shadow-[6px_6px_0_0_#000] dark:shadow-[6px_6px_0_0_#fff] uppercase transition duration-300 ease-in-out transform active:translate-x-1 active:translate-y-1">
Send Reset Link
</button>
<div class="text-center text-sm">
<a href="#" class="font-bold text-red-700 dark:text-red-300 hover:underline uppercase">Back to Login</a>
</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
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 minimaliste avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.