Composant de connexion sociale
Composant de connexion sociale réactif conçu pour le mode sombre à l’aide d’une palette de couleurs monochromatiques. Convient pour la consommation de blogs et de contenu avec des fonctionnalités interactives.
HTML Code
<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto mt-10">
<h2 class="text-2xl font-bold mb-4 text-center">Log in with Social Media</h2>
<div class="flex flex-col space-y-4">
<a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span>Log in with Facebook</span>
</a>
<a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span>Log in with Google</span>
</a>
<a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span>Log in with Twitter</span>
</a>
</div>
<p class="mt-4 text-center text-gray-400">Or, <a href="#" class="text-gray-300 hover:underline">create a new account</a></p>
</div>Composants associés
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
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.
Composant de connexion sociale
Un composant complexe de connexion sociale pour une place de marché, comprenant des boutons de connexion sociale, des champs d’e-mail/mot de passe et des liens « Mot de passe oublié »/« Inscription ». Conçu selon les principes de Material Design en utilisant des tons de bijoux, une réactivité totale et une prise en charge du mode sombre.