Composant Composants d’authentification
Composant d’authentification avec mode sombre, effets réactifs et aucune dépendance JavaScript.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-900">
<div class="bg-gray-800 p-10 rounded-lg shadow-xl w-full max-w-md">
<h1 class="text-white text-center text-2xl font-bold mb-6">Login</h1>
<form>
<div class="mb-4">
<label for="email" class="block text-gray-400 text-sm font-bold mb-2">Email Address</label>
<input type="email" id="email" class="shadow appearance-nonse border border-gray-700 rounded w-full py-2 px-3 text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-700" placeholder="Enter your email">
</div>
<div class="mb-6">
<label for="password" class="block text-gray-400 text-sm font-bold mb-2">Password</label>
<input type="password" id="password" class="shadow appearance-none border border-gray-700 rounded w-full py-2 px-3 text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-700" placeholder="Enter your password">
</div>
<div class="flex items-center justify-between">
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Sign In</button>
<a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-700" href="#">Forgot Password?</a>
</div>
</form>
</div>
</div>Composants associés
Skeuomorphic_Auth_CRM_Component
Un composant d’authentification complexe et réactif pour les outils CRM/Business, doté d’un style de conception skeuomorphe avec des couleurs neutres froides et une prise en charge du mode sombre.
Retro_Healthcare_Auth_Component
Un composant d’authentification réactif avec un design rétro/vintage, une palette de couleurs sourdes, adapté aux applications médicales/de santé, y compris la prise en charge du mode sombre.
MinimalisteAuthForm
Un composant de formulaire de connexion réactif et minimaliste conçu pour les portfolios ou les applications Web. Il présente une esthétique de design plat avec une palette de couleurs complémentaire : le bleu est utilisé pour les éléments interactifs en mode clair et l’orange est utilisé en mode sombre. Le formulaire comprend des champs pour l’adresse e-mail et le mot de passe, une option « Se souvenir de moi », un lien « Mot de passe oublié », une option pour s’inscrire et l’intégration de la connexion sociale (par exemple, GitHub). Il prend en charge le thème sombre et est construit uniquement avec HTML et Tailwind CSS pour une intégration facile.