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 avec Material Design, des couleurs vives, une complexité modérée et un objectif de commerce électronique. Il est réactif et prend en charge le thème sombre en utilisant Tailwind CSS. Aucun JavaScript n’est inclus.
Composant de réinitialisation de mot de passe
Un composant complexe de réinitialisation de mot de passe conçu pour les services gouvernementaux/publics, avec un design épuré et minimaliste basé sur la typographie avec des couleurs à contraste élevé et une réactivité totale, y compris la prise en charge du mode sombre.
Composant de réinitialisation de mot de passe
Un composant réactif de réinitialisation de mot de passe avec une conception monospace/développeur, une palette de couleurs d’automne et une esthétique de terminal, adapté aux applications de commerce électronique. Inclut la prise en charge du mode sombre.