Composant de réinitialisation de mot de passe - Tableau de bord rétro/vibrant
Un composant de réinitialisation de mot de passe de style rétro-vintage avec des couleurs vives, adapté à un tableau de bord. Il dispose d’un design réactif et d’un support de thème sombre utilisant Tailwind CSS. Le design évoque l’esthétique des années 80/90.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 max-w-md w-full border-4 border-purple-500 dark:border-teal-400 transform -rotate-3 hover:rotate-0 transition-transform duration-300">
<div class="text-center mb-8">
<h2 class="text-4xl font-bold text-gray-800 dark:text-white font-mono mb-2">RESET <span class="text-purple-600 dark:text-teal-400">PASSWORD</span></h2>
<p class="text-gray-600 dark:text-gray-300 text-sm">Enter your email to receive a password reset link.</p>
</div>
<form>
<div class="mb-6">
<label for="email" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2 uppercase tracking-wider">Email Address</label>
<input type="email" id="email" class="shadow appearance-none border-4 border-yellow-400 dark:border-rose-500 rounded-lg w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-teal-600 bg-gray-200 dark:bg-gray-700 placeholder-gray-500 dark:placeholder-gray-400 transition-all duration-300" placeholder="[email protected]">
</div>
<div class="flex items-center justify-between">
<button type="submit" class="bg-gradient-to-r from-purple-600 to-pink-500 hover:from-purple-700 hover:to-pink-600 text-white font-extrabold py-3 px-6 rounded-full focus:outline-none focus:shadow-outline transform skew-x-12 hover:skew-x-0 transition-all duration-300 text-lg uppercase tracking-widest">
Send Link
</button>
<a href="#" class="inline-block align-baseline font-bold text-sm text-purple-600 dark:text-teal-400 hover:text-purple-800 dark:hover:text-teal-200 transition-colors duration-300">
Remembered your password?
</a>
</div>
</form>
<div class="mt-8 text-center text-gray-500 dark:text-gray-400 text-xs">
<p>©2023 RETRO CORP. All rights reserved. <span class="text-pink-500 dark:text-yellow-300">Stay Awesome!</span></p>
</div>
</div>
</div>
Composants associés
Composant de réinitialisation de mot de passe
Un composant complexe et réactif de réinitialisation de mot de passe avec un design « Organique/Inspiré de la nature », une palette de couleurs « Coucher de soleil/Tons chauds », adapté aux outils CRM/Business. Inclut la prise en charge du mode sombre.
Composant de réinitialisation de mot de passe
Composant de réinitialisation de mot de passe avec style Neumorphisme, Schéma de couleurs complémentaire, Complexité complexe, à des fins de médias sociaux, à l’aide de Tailwind CSS. Conception réactive avec prise en charge du thème sombre.
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.