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 réactif avec le style Glassmorphism, les couleurs vives et la prise en charge du thème sombre.
SocialLoginComponent
Un composant de connexion sociale réactif construit avec Tailwind CSS, avec des micro-interactions subtiles et une prise en charge complète du mode sombre. Utilise le CDN simple-icons pour les logos de médias sociaux.
Connexion sociale neumorphique en niveaux de gris
Un composant de connexion sociale réactif avec un style de conception Neumorphism en niveaux de gris. Comprend des boutons pour les fournisseurs de réseaux sociaux, un séparateur et des liens pour s’inscrire/Mot de passe oublié. Prend en charge le mode sombre à l’aide du préfixe dark : de Tailwind. Conçu pour les environnements de tableau de bord.