Composant de connexion sociale
Composant de connexion sociale avec conception matérielle, couleurs pastel et complexité modérée pour les entreprises/entreprises
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="px-8 py-6 mt-4 text-left bg-white dark:bg-gray-800 shadow-lg rounded-lg">
<h3 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Login</h3>
<div class="mt-4">
<div>
<label class="block text-gray-700 dark:text-gray-200" for="email">Email</label>
<input type="email" placeholder="Email" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600">
</div>
<div class="mt-4">
<label class="block text-gray-700 dark:text-gray-200" for="password">Password</label>
<input type="password" placeholder="Password" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600">
</div>
<div class="flex items-baseline justify-between">
<button class="px-6 py-2 mt-4 text-white bg-blue-600 rounded-lg hover:bg-blue-900">Login</button>
<a href="#" class="text-sm text-blue-600 hover:underline">Forgot password?</a>
</div>
<div class="mt-6 text-center">
<p class="text-gray-700 dark:text-gray-200">Or login with:</p>
<div class="flex justify-center gap-4 mt-2">
<button class="px-4 py-2 border rounded-md flex items-center gap-2 hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" class="h-5">
Google
</button>
<button class="px-4 py-2 border rounded-md flex items-center gap-2 hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/1200px-2021_Facebook_icon.svg.png" alt="Facebook" class="h-5">
Facebook
</button>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant de connexion sociale
Composant de connexion sociale réactif avec micro-interactions - Axé sur de petites animations attrayantes qui répondent aux actions de l’utilisateur, Schéma de couleurs complémentaire, Niveau de complexité simple, à des fins de blog/contenu, avec prise en charge du thème sombre.
Composant Art Déco Social Login
Un composant complexe de connexion sociale conçu avec une esthétique Art déco pour les outils CRM/Business, avec des motifs géométriques, des neutres chauds et une réactivité totale avec la prise en charge du mode sombre.
Composant Social Login - Microinteractions
Une carte de composant de connexion sociale utilisant Tailwind CSS, avec des micro-interactions sur les boutons (effet d’échelle au survol/focus), la réactivité (largeur maximale centrée) et la prise en charge du thème sombre. Utilise une image de substitution de picsum.photos et des SVG intégrés pour les icônes sociales. Pas de JavaScript.