Formulaire de connexion Composante 37
Un composant de formulaire de connexion réactif conçu dans le style Material Design avec Tailwind CSS, prenant en charge le mode sombre.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg w-96 p-6">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Login</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="username">Username</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Enter your username">
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="password">Password</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="Enter your password">
</div>
<div class="flex items-center justify-between">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">Login</button>
<a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">Forgot Password?</a>
</div>
</form>
<div class="mt-4 text-center">
<p class="text-gray-600 dark:text-gray-300 text-sm">Or login with</p>
<div class="flex justify-center mt-2">
<img class="h-8 w-8 rounded-full border-2 border-gray-600 dark:border-gray-400" src="https://picsum.photos/seed/user1/40/40" alt="User Avatar">
<img class="h-8 w-8 rounded-full border-2 border-gray-600 dark:border-gray-400 ml-2" src="https://picsum.photos/seed/user2/40/40" alt="User Avatar">
<img class="h-8 w-8 rounded-full border-2 border-gray-600 dark:border-gray-400 ml-2" src="https://picsum.photos/seed/user3/40/40" alt="User Avatar">
</div>
</div>
</div>
</div>Composants associés
Formulaire de connexion brutaliste
Un formulaire de connexion complexe et réactif conçu dans un style brutaliste avec des tons de terre, adapté aux applications de commerce électronique, avec prise en charge du mode sombre.
Composant du formulaire de connexion
Un formulaire de connexion inspiré du Bauhaus pour les marques de mode/beauté, avec des couleurs très contrastées, des formes géométriques et une réactivité totale avec prise en charge du mode 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.