Composant Composants d’authentification
Un composant Web de style brutalisme pour les interfaces d’authentification des médias sociaux avec une palette de couleurs pastel et un contraste élevé pour le mode sombre.
HTML Code
<div class="min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center p-4">
<div class="max-w-md w-full bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md p-8 space-y-8">
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 text-center">Log In</h2>
<form class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
<input type="email" name="email" required placeholder="[email protected]" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:border-blue-600 p-2">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<input type="password" name="password" required placeholder="••••••••" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:border-blue-600 p-2">
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
<label for="remember-me" class="ml-2 block text-sm text-gray-800 dark:text-gray-100">Remember me</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Forgot your password?</a>
</div>
</div>
<button type="submit" class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400 dark:focus:ring-blue-400">Log In</button>
</form>
<div class="text-center">
<p class="text-sm text-gray-600 dark:text-gray-300">Don't have an account? <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Sign Up</a></p>
</div>
<div class="flex justify-between items-center">
<div class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-600"></div>
<span class="text-gray-600 dark:text-gray-300">or</span>
<div class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-600"></div>
</div>
<div class="flex justify-center space-x-4">
<a href="#" class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shadow-md">
<img src="https://picsum.photos/30/30?random=1" alt="Example Image" class="rounded-full" />
</a>
<a href="#" class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shadow-md">
<img src="https://picsum.photos/30/30?random=2" alt="Example Image" class="rounded-full" />
</a>
<a href="#" class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shadow-md">
<img src="https://picsum.photos/30/30?random=3" alt="Example Image" class="rounded-full" />
</a>
</div>
</div>
</div>Composants associés
Composants d’authentification
Composant d’authentification réactif prenant en charge le mode sombre, utilisant Tailwind CSS avec des arrière-plans sombres, un formulaire de connexion et d’inscription et des images d’espace réservé aléatoires pour les éléments de l’interface utilisateur.
Composant Composants d’authentification
Composant d’authentification avec mode sombre, effets réactifs et aucune dépendance JavaScript.
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.