Composant de connexion/inscription Brutalism
Un composant de connexion/inscription de style brutaliste avec une palette de couleurs triadique, une complexité moyenne, un design réactif et une prise en charge du mode sombre. Utilise picsum.photos pour les images et randomuser.me pour les avatars.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-yellow-400 dark:bg-purple-800 p-4">
<div class="bg-white dark:bg-black text-black dark:text-white border-4 border-black dark:border-white p-8 rounded-none shadow-xl w-full max-w-md">
<h2 class="text-2xl font-bold mb-6 text-center uppercase">Join Us</h2>
<div class="mb-4">
<label for="email" class="block text-sm font-bold mb-2">Email</label>
<input type="email" id="email" class="w-full p-3 border-4 border-black dark:border-white bg-yellow-200 dark:bg-purple-900 focus:outline-none focus:ring-0 focus:border-red-600 dark:focus:border-red-400" placeholder="[email protected]">
</div>
<div class="mb-6">
<label for="password" class="block text-sm font-bold mb-2">Password</label>
<input type="password" id="password" class="w-full p-3 border-4 border-black dark:border-white bg-yellow-200 dark:bg-purple-900 focus:outline-none focus:ring-0 focus:border-red-600 dark:focus:border-red-400" placeholder="********">
</div>
<button class="w-full bg-red-600 dark:bg-red-400 text-white font-bold py-3 px-4 border-4 border-black dark:border-white uppercase">Login</button>
<p class="text-center text-sm mt-4">Don't have an account? <a href="#" class="text-red-600 dark:text-red-400 font-bold">Sign up here</a>.</p>
<div class="mt-8 text-center">
<p class="text-lg font-bold mb-4">Or login with:</p>
<div class="flex justify-center space-x-4">
<button class="bg-blue-600 dark:bg-blue-400 text-white font-bold py-2 px-4 border-4 border-black dark:border-white">Facebook</button>
<button class="bg-red-500 dark:bg-red-700 text-white font-bold py-2 px-4 border-4 border-black dark:border-white">Google</button>
</div>
</div>
</div>
</div>Composants associés
Composant de connexion/inscription
Un composant de connexion/inscription réactif conçu dans un style skeuomorphique utilisant Tailwind CSS, avec prise en charge du thème sombre.
Formulaire de connexion/inscription minimaliste - Mode/Beauté
Un formulaire de connexion/inscription minimaliste et plat conçu pour les marques de mode/beauté, avec des couleurs neutres chaudes, une réactivité totale et une prise en charge du mode sombre. Il offre une esthétique épurée en mettant l’accent sur l’expérience utilisateur.
Composant de connexion/inscription
Un composant de connexion/inscription simple, propre et minimaliste avec un style de typographie suisse/international et une palette de couleurs joyeuses, conçu pour les sites Web d’entreprise. Il est entièrement réactif et inclut la prise en charge du mode sombre.