Composant Composants d’authentification
Un composant d’authentification réactif conçu pour l’interface utilisateur en mode sombre, avec un formulaire de connexion et d’inscription avec le style CSS Tailwind.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-900 text-white">
<div class="bg-gray-800 rounded-lg shadow-lg p-8 w-96">
<h2 class="text-2xl font-bold mb-6 text-center">Welcome Back!</h2>
<form>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2" for="email">Email</label>
<input type="email" id="email" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="[email protected]" required />
</div>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2" for="password">Password</label>
<input type="password" id="password" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="********" required />
</div>
<button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300">Login</button>
</form>
<div class="mt-4 text-center">
<a href="#" class="text-sm text-indigo-400 hover:underline">Forgot your password?</a>
</div>
<div class="mt-6 border-t border-gray-600"></div>
<h2 class="text-2xl font-bold mt-6 text-center">Create an Account</h2>
<form>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2" for="new-email">Email</label>
<input type="email" id="new-email" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="[email protected]" required />
</div>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2" for="new-password">Password</label>
<input type="password" id="new-password" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="********" required />
</div>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2" for="avatar">Upload Avatar</label>
<input type="file" id="avatar" class="block w-full text-sm text-gray-500 bg-gray-600 rounded focus:outline-none" />
</div>
<button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300">Sign Up</button>
</form>
<div class="mt-4 text-center">
<small>Or sign up using</small>
<div class="flex justify-center mt-2">
<img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
<img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
<img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
</div>
</div>
</div>
</div>Composants associés
Composant Composants d’authentification
Un composant d’authentification complexe conçu pour les applications industrielles/manufacturières, avec une esthétique monospace/développeur avec des tons de couleur océan/bleu. Comprend des formulaires de connexion, d’inscription et de réinitialisation de mot de passe, entièrement réactifs avec prise en charge du mode sombre.
Composant Composants d’authentification
Un composant d’authentification simple et réactif conçu selon les principes de Material Design, avec des tons de terre et la prise en charge du mode sombre. Convient pour un site de portefeuille.
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.