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
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
Composant de réinitialisation de mot de passe réactif avec une interface utilisateur en mode sombre, utilisant un jeu de couleurs analogue. Conçu pour les applications de commerce électronique.
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.