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 simple conçu dans un style brutaliste avec des tons de terre, adapté à des fins de blog/contenu, et optimisé pour les thèmes clairs et sombres.
Composant du formulaire de connexion
Un composant de formulaire de connexion réactif conçu selon les principes de Material Design et stylisé à l’aide de Tailwind CSS. Il présente une palette de couleurs de tons de terre et une mise en page simple adaptée à un blog ou à une plate-forme de consommation de contenu, avec prise en charge du thème sombre.
Formulaire de connexion rétro
Un composant de formulaire de connexion de style rétro/vintage avec des effets réactifs et la prise en charge du thème sombre, conçu à l’aide de Tailwind CSS.