Composant de connexion sociale
Un composant de connexion sociale minimaliste conçu pour les sites Web d’entreprise/d’entreprise avec une palette de couleurs complémentaire et une prise en charge du mode sombre.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-8 w-96">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center mb-6">Login with Social Media</h2>
<div class="flex flex-col space-y-4">
<button class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">
<img class="w-5 h-5 mr-2" src="https://picsum.photos/20" alt="Google Logo"> Login with Google
</button>
<button class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">
<img class="w-5 h-5 mr-2" src="https://picsum.photos/20" alt="Facebook Logo"> Login with Facebook
</button>
<button class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">
<img class="w-5 h-5 mr-2" src="https://picsum.photos/20" alt="LinkedIn Logo"> Login with LinkedIn
</button>
</div>
<div class="mt-4 text-center text-gray-600 dark:text-gray-400">
<p>Or login with your email</p>
</div>
<div class="mt-4 flex flex-col space-y-4">
<input type="email" placeholder="Email" class="border dark:border-gray-700 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500" />
<input type="password" placeholder="Password" class="border dark:border-gray-700 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500" />
<button class="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 rounded-lg transition duration-200">Login</button>
</div>
</div>
</div>Composants associés
Composant Art Déco Social Login
Un composant de connexion sociale complexe, inspiré de l’Art déco, avec une palette de couleurs bonbon/doux, conçu pour les tableaux de bord, entièrement réactif avec prise en charge du mode sombre.
Composant de connexion sociale minimaliste
Composant de connexion sociale minimaliste en niveaux de gris pour le commerce électronique, simple, réactif, prise en charge du thème sombre, pas de JavaScript
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.