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
Réinitialisation du mot de passe Skeuomorphic Pastel
Un composant Web réactif de réinitialisation de mot de passe conçu avec une esthétique Skeuomorphism, avec des couleurs pastel douces. L’interface est complexe, avec de multiples éléments interactifs détaillés à travers des effets 3D, des ombres et des textures subtiles créées avec Tailwind CSS. Il comprend un formulaire pour la saisie d’e-mails et un bouton « Envoyer le lien de réinitialisation » bien visible, ainsi que des liens secondaires. Le thème sombre est pris en charge. Idéal pour les vitrines de portfolio.
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.