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.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-300 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg w-full max-w-md">
<h2 class="text-3xl font-bold text-gray-800 dark:text-white text-center mb-6">Login</h2>
<form>
<div class="mb-4">
<label class="block text-lg font-medium text-gray-700 dark:text-gray-300" for="email">Email</label>
<input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring focus:ring-green-500 dark:focus:ring-green-600" required>
</div>
<div class="mb-4">
<label class="block text-lg font-medium text-gray-700 dark:text-gray-300" for="password">Password</label>
<input type="password" id="password" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring focus:ring-green-500 dark:focus:ring-green-600" required>
</div>
<div class="flex justify-between mb-6">
<div class="flex items-center">
<input type="checkbox" id="remember" class="mr-2 leading-tight">
<label for="remember" class="text-sm text-gray-600 dark:text-gray-400">Remember Me</label>
</div>
<a href="#" class="text-sm text-green-600 hover:underline dark:text-green-400">Forgot Password?</a>
</div>
<button type="submit" class="w-full py-2 text-white bg-green-600 rounded-md hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-400 transition duration-150 ease-in-out">Login</button>
</form>
<div class="mt-4 text-center">
<p class="text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-green-600 hover:underline dark:text-green-400">Sign Up</a></p>
</div>
<div class="mt-8 text-center">
<img src="https://picsum.photos/100" alt="Random" class="rounded-full mx-auto">
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">User Avatar Loaded Randomly</p>
</div>
</div>
</div>Composants associés
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.
Composant de formulaire de connexion - Mode sombre vibrant
Un composant de formulaire de connexion complexe et réactif conçu pour une utilisation professionnelle/d’entreprise avec une palette de couleurs vives et une prise en charge complète du mode sombre, visant à réduire la fatigue oculaire.
Composant du formulaire de connexion
Un composant de formulaire de connexion simple et réactif avec des couleurs neutres chaudes, un design axé sur la micro-interaction et une prise en charge du mode sombre, adapté aux systèmes de réservation et aux systèmes de réservation.