Composants d’authentification
Un composant d’authentification complexe et réactif dans un design brutaliste avec un thème sombre, adapté aux applications de médias sociaux.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800">
<div class="bg-gray-700 dark:bg-gray-700 p-6 rounded-lg shadow-xl w-full max-w-lg">
<h1 class="text-3xl font-bold text-white mb-4">Join Our Community</h1>
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-white">Email</label>
<input type="email" id="email" class="mt-1 block w-full p-2 bg-gray-800 dark:bg-gray-800 text-white border border-gray-700 rounded-md focus:ring focus:ring-yellow-400" placeholder="[email protected]" required>
</div>
<div class="mb-4">
<label for="password" class="block text-sm font-medium text-white">Password</label>
<input type="password" id="password" class="mt-1 block w-full p-2 bg-gray-800 dark:bg-gray-800 text-white border border-gray-700 rounded-md focus:ring focus:ring-yellow-400" placeholder="********" required>
</div>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<input type="checkbox" id="remember" class="h-4 w-4 text-yellow-500 border-gray-300 rounded focus:ring focus:ring-yellow-400">
<label for="remember" class="ml-2 block text-sm text-white">Remember me</label>
</div>
<a href="#" class="text-sm text-yellow-400 hover:underline">Forgot Password?</a>
</div>
<button class="w-full py-2 px-4 bg-yellow-500 hover:bg-yellow-400 text-white font-bold rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-300">Sign In</button>
<div class="my-4 text-center"><span class="text-white">or</span></div>
<button class="w-full py-2 px-4 bg-blue-600 hover:bg-blue-500 text-white font-bold rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2"> Sign in with Google
</button>
<p class="mt-4 text-sm text-white text-center">
Don't have an account?
<a href="#" class="text-yellow-400 hover:underline">Sign Up</a>
</p>
</div>
</div>Composants associés
Composants d’authentification
Un composant de connexion et d’inscription réactif et interactif conçu avec des micro-interactions, utilisant des couleurs complémentaires pour une interface de contenu de blog avec prise en charge du thème sombre.
Playful_Manufacturing_Authentication_Component
Un composant d’authentification ludique et joyeux conçu pour les applications industrielles/manufacturières, avec des éléments arrondis, une palette de couleurs analogue et une réactivité totale avec 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.