Composant de connexion sociale
Composant de connexion sociale de conception matérielle avec schéma de couleurs analogue, complexité simple, à des fins de portefeuille, réactif avec prise en charge du thème sombre.
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 shadow-lg dark:bg-gray-800 md:w-1/3">
<div class="flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-20 h-20 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg>
</div>
<h3 class="text-2xl font-bold text-center dark:text-white">Social Login</h3>
<form action="">
<div class="mt-4">
<div class="flex justify-around">
<button type="button" class="text-white bg-[#4285F4] hover:bg-[#4285F4]/90 focus:ring-4 focus:ring-[#4285F4]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-[#4285F4]/55 mr-2 mb-2">
<svg class="w-4 h-4 mr-2 -ml-1" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512"><path fill="currentColor" d="M488 261.8C488 278.6 472.9 291.9 455.7 291.9H258.9V349.4H377.6C374.7 366.8 364.8 380.6 350.2 390.2C368.5 403.5 392.1 412.2 418.8 412.2C450.9 412.2 477.5 401 490.6 382.7L488 261.8z"></path></svg>
Sign in with Google
</button>
<button type="button" class="text-white bg-[#3b5998] hover:bg-[#3b5998]/90 focus:ring-4 focus:ring-[#3b5998]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-[#3b5998]/55 mr-2 mb-2">
<svg class="w-4 h-4 mr-2 -ml-1" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M279.1 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.4 0 225.4 0c-73.22 0-121.1 44.38-121.1 115.7v66.91H64v92.66h80.07V512h96.93V288z"></path></svg>
Sign in with Facebook
</button>
</div>
</div>
</form>
</div>
</div>Composants associés
Composant de connexion sociale
Composant de connexion sociale avec interface utilisateur en mode sombre et effets réactifs
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 de connexion sociale
Composant de connexion sociale avec conception de micro-interactions, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS.