Composant de connexion sociale
Un composant de connexion sociale en mode sombre réactif conçu pour un tableau de bord, avec une palette de couleurs triadique et des éléments interactifs riches. Il comprend des options de connexion avec diverses plateformes sociales, la visualisation des données utilisateur et des contrôles.
HTML Code
<div class="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-6">
<h2 class="text-3xl font-bold mb-6">Login to Your Dashboard</h2>
<div class="bg-gray-800 rounded-lg shadow-lg p-8 w-full max-w-sm">
<div class="flex justify-between mb-4">
<span class="text-lg font-semibold">Sign in with:</span>
<img src="https://picsum.photos/30/30?random=1" alt="Avatar" class="rounded-full">
</div>
<div class="flex flex-col space-y-4">
<a href="#" class="flex items-center justify-center bg-blue-700 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 transition duration-300">
<img class="mr-2" src="https://picsum.photos/30/30?random=2" alt="Facebook" /> Facebook
</a>
<a href="#" class="flex items-center justify-center bg-green-700 text-white font-bold py-2 px-4 rounded hover:bg-green-600 transition duration-300">
<img class="mr-2" src="https://picsum.photos/30/30?random=3" alt="Google" /> Google
</a>
<a href="#" class="flex items-center justify-center bg-red-700 text-white font-bold py-2 px-4 rounded hover:bg-red-600 transition duration-300">
<img class="mr-2" src="https://picsum.photos/30/30?random=4" alt="Twitter" /> Twitter
</a>
</div>
<div class="mt-6 text-center">
<span class="text-sm">Don't have an account? <a href="#" class="text-blue-400 hover:underline">Sign up</a></span>
</div>
</div>
<footer class="mt-6 text-gray-400 text-xs">
© 2023 Your Company. All rights reserved.
</footer>
</div>Composants associés
Composant de connexion sociale - Neumorphism Vibrant Complex
Un composant de formulaire de connexion sociale complexe et réactif stylisé avec Neumorphism et des accents vibrants à l’aide de Tailwind CSS, prenant en charge le mode 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.
Composant Material Design Social Login
Composant de connexion sociale de conception matérielle avec schéma de couleurs complémentaire, complexité modérée, à des fins de blog/contenu, réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS.