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.
HTML Code
<div class="max-w-sm mx-auto p-6 bg-white rounded-lg shadow-xl dark:bg-gray-800 dark:shadow-lg sm:max-w-md">
<h2 class="text-2xl font-bold text-center text-gray-900 dark:text-white mb-6">Login with Socials</h2>
<div class="space-y-4">
<button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 transition transform hover:scale-105 duration-200 ease-in-out">
<img class="mr-2 h-5 w-5" src="https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/google.svg" alt="Google">
Sign in with Google
</button>
<button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 transition transform hover:scale-105 duration-200 ease-in-out">
<img class="mr-2 h-5 w-5" src="https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/facebook.svg" alt="Facebook">
Sign in with Facebook
</button>
<button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 transition transform hover:scale-105 duration-200 ease-in-out">
<img class="mr-2 h-5 w-5" src="https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/twitter.svg" alt="Twitter">
Sign in with Twitter
</button>
</div>
</div>Composants associés
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.
Composant de connexion sociale
Un composant de connexion sociale simple avec un design skeuomorphique, des tons de terre et une mise en page réactive avec prise en charge du mode sombre. Ce composant convient aux sites de blog ou de consommation de contenu, offrant une expérience de connexion visuellement attrayante et conviviale.
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.