Composant du formulaire de connexion
Un formulaire de connexion simple et réactif conçu avec un style skeuomorphe qui imite les éléments du monde réel à l’aide d’une palette de couleurs vives. Il convient aux interfaces de médias sociaux et prend en charge le mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gradient-to-r from-blue-500 to-purple-600 dark:from-blue-800 dark:to-purple-900"> <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full"> <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">Welcome Back!</h2> <div class="mt-6"> <div class="mb-4"> <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label> <input type="email" id="email" class="mt-1 block w-full p-3 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="[email protected]" required/> </div> <div class="mb-6"> <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label> <input type="password" id="password" class="mt-1 block w-full p-3 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="••••••••" required/> </div> <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-400">Login</button> </div> <div class="mt-4 text-center"> <img src="https://picsum.photos/50/50" alt="Login Illustration" class="mx-auto rounded-full"/> </div> <div class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400"> Don't have an account? <a href="#" class="text-blue-500 dark:text-blue-400">Sign up</a> </div> </div> </div>Composants associés
Composant du formulaire de connexion
Un composant de formulaire de connexion minimaliste conçu avec une palette de couleurs triadique adaptée à la présentation de portfolios avec prise en charge du mode sombre.
Composant du formulaire de connexion
Un composant de formulaire de connexion complexe et réactif avec des micro-interactions et une palette de couleurs analogue, adapté aux sites Web d’entreprise. Il prend en charge le mode sombre et utilise Tailwind CSS pour le coiffage.
Composant du formulaire de connexion
Un composant de formulaire de connexion simple et réactif, conçu avec une palette de couleurs pastel (roses doux et gris complémentaires) et des micro-interactions attrayantes, telles que des transitions fluides et des effets subtils de survol/mise au point. Conçu pour les sites Web d’entreprise ou d’entreprise, il présente une mise en page épurée, est entièrement réactif et comprend une prise en charge complète des thèmes sombres. Construit uniquement avec HTML et Tailwind CSS.