Composant du formulaire de connexion
Un formulaire de connexion réactif et complexe avec un design minimaliste/plat adapté à un blog ou à un site de contenu. Il dispose d’une palette de couleurs monochromatiques, d’une prise en charge du thème sombre et de plusieurs éléments interactifs, mis en œuvre uniquement avec HTML et Tailwind CSS.
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 p-8 rounded-lg shadow-xl w-full max-w-md">
<h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8">Login to Your Account</h2>
<div class="flex justify-center mb-6">
<img src="https://picsum.photos/100" alt="Blog Logo" class="rounded-full w-24 h-24 object-cover border-4 border-gray-200 dark:border-gray-700">
</div>
<form>
<div class="mb-5">
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
<input type="email" id="email" class="w-full px-4 py-3 rounded-md bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 text-gray-900 dark:text-white transition duration-200" placeholder="[email protected]">
</div>
<div class="mb-5">
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Password</label>
<input type="password" id="password" class="w-full px-4 py-3 rounded-md bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 text-gray-900 dark:text-white transition duration-200" placeholder="••••••••">
</div>
<div class="flex items-center justify-between mb-6">
<div class="flex items-center">
<input type="checkbox" id="remember_me" class="h-4 w-4 text-blue-600 dark:text-blue-500 rounded border-gray-300 dark:border-gray-600 focus:ring-blue-500 dark:focus:ring-blue-400">
<label for="remember_me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
</div>
<a href="#" class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200">Forgot Password?</a>
</div>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-200">
Login
</button>
</form>
<div class="mt-8 text-center text-gray-600 dark:text-gray-400">
<p>Don't have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 font-medium transition duration-200">Sign Up</a></p>
</div>
<div class="mt-6 flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4">
<button class="w-full sm:w-auto bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 text-white font-bold py-2 px-4 rounded-md flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-200">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M12.0003 4.75C9.0935 4.75 6.647 6.0211 5.09348 7.98926L2.36865 5.26442C4.24689 3.03348 7.02705 1.75 12.0003 1.75C16.8967 1.75 20.9157 3.4283 23.6393 5.92015L20.6125 8.947C18.667 7.0425 15.6033 5.92015 12.0003 5.92015C9.80036 5.92015 7.84687 6.69344 6.37508 8.01639L5 6.77258V6.7725C5 6.81846 5 6.86445 5 6.91042Z" clip-rule="evenodd" fill-rule="evenodd"/>
<path d="M4.75 9.99997C4.75 10.974 4.887 11.9167 5.13847 12.8021L7.75549 11.3995C7.66982 11.0858 7.58784 10.741 7.58784 9.99997C7.58784 8.24357 8.35821 6.67104 9.68965 5.56832L6.96482 2.84348C5.2323 4.41595 4.75 7.0396 4.75 9.99997Z" clip-rule="evenodd" fill-rule="evenodd"/>
<path d="M22.25 10C22.25 11.9604 21.6881 14.1568 20.3607 16.3607L18.0625 14.0625C19.2605 12.6377 19.8291 11.2335 19.8291 10C19.8291 8.35848 19.2605 6.7552 18.0625 5.33045L20.3607 3.03225C21.6881 5.23616 22.25 7.43261 22.25 10Z" clip-rule="evenodd" fill-rule="evenodd"/>
<path d="M12.0003 19.25C14.7397 19.25 17.0664 18.2329 18.667 16.2925L20.6125 18.238C18.667 20.1425 15.6033 21.25 12.0003 21.25C7.02705 21.25 4.24689 19.9665 2.36865 17.7355L5.09348 15.0107C6.647 16.9788 9.0935 18.25 12.0003 18.25C14.1997 18.25 16.1532 17.4767 17.625 16.1538L16.2163 17.4116L18.9163 17.2916L17.625 18.25L12.0003 19.25Z" clip-rule="evenodd" fill-rule="evenodd"/>
</svg>
Login with Google
</button>
<button class="w-full sm:w-auto bg-blue-800 hover:bg-blue-900 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-bold py-2 px-4 rounded-md flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-blue-800 dark:focus:ring-blue-600 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-200">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M14 13.5h2.7L17 10h-3V7.9c0-.8.2-1.3 1.3-1.3H17V4.3c-.4 0-1.7-.1-2.9-.1-3.1 0-5.2 1.9-5.2 5.3v2.7H7v3h2.1V22h4.9v-8.5z"/>
</svg>
Login with Facebook
</button>
</div>
</div>
</div>Composants associés
Composant du formulaire de connexion
Un composant de formulaire de connexion réactif avec un design skeuomorphique, une palette de couleurs monochromatiques et une prise en charge du thème sombre, adapté aux sites Web d’entreprise.
Formulaire de connexion Skeuomorphic
Un simple formulaire de connexion Skeuomorphic avec des couleurs triadiques à des fins de tableau de bord, avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Formulaire de connexion brutaliste
Un composant de formulaire de connexion simple, de style brutaliste, conçu pour les applications technologiques/SaaS, avec un contraste élevé, une typographie audacieuse et une palette de couleurs analogue avec une réactivité totale et une prise en charge du mode sombre.