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
Un composant de connexion sociale complexe et réactif conçu pour les tableaux de bord. Utilise une interface utilisateur en mode sombre avec une palette de couleurs en niveaux de gris. Comprend des boutons de fournisseur de réseaux sociaux, un formulaire d’e-mail/mot de passe, une bascule « Se souvenir de moi » et un séparateur avec d’autres options de connexion. Entièrement réactif avec l’illustration de l’image et utilise Tailwind CSS avec sombre : préfixe pour la prise en charge du thème sombre. Aucun JavaScript n’est nécessaire.
Composant de connexion sociale
Un composant de connexion sociale minimaliste conçu pour les sites Web d’entreprise/d’entreprise avec une palette de couleurs complémentaire et une prise en charge du mode sombre.
Neumorphic_Gaming_Social_Login_Component
Un composant de connexion sociale complexe et réactif dans un style neumorphe avec des tons de terre, conçu pour les sites Web de jeux. Comprend plusieurs options de connexion et la prise en charge du mode sombre.