Composant de connexion sociale
Un composant de connexion sociale minimaliste au design plat avec des effets réactifs et la prise en charge du thème sombre.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 w-full max-w-xs">
<h2 class="text-center text-lg font-semibold text-gray-900 dark:text-gray-100">Login with</h2>
<div class="mt-4 flex justify-around w-full">
<button class="flex items-center justify-center w-1/3 p-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
<img src="https://picsum.photos/24/24?random=1" alt="Google Logo" class="mr-2 rounded-full">
Google
</button>
<button class="flex items-center justify-center w-1/3 p-2 bg-gray-700 text-white rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-600 focus:ring-opacity-50">
<img src="https://picsum.photos/24/24?random=2" alt="Facebook Logo" class="mr-2 rounded-full">
Facebook
</button>
</div>
<div class="mt-4 text-center">
<span class="text-gray-500 dark:text-gray-400">or</span>
</div>
<input type="email" placeholder="Email" class="mt-4 p-2 w-full text-gray-800 dark:text-gray-100 bg-gray-200 dark:bg-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
<input type="password" placeholder="Password" class="mt-2 p-2 w-full text-gray-800 dark:text-gray-100 bg-gray-200 dark:bg-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
<button class="mt-4 w-full p-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
Log In
</button>
<p class="mt-2 text-center text-gray-600 dark:text-gray-400 text-sm">
Don't have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sign up</a>
</p>
</div>
</div>Composants associés
Composant de connexion sociale - Immobilier (aquarelle/néon)
Un composant de connexion sociale simple et réactif pour les plateformes immobilières, avec un style aquarelle/artistique avec une palette de couleurs néon/électrique. Inclut la prise en charge du mode sombre et du HTML sémantique.
Composant de connexion sociale
Un composant de connexion sociale minimaliste conçu avec Tailwind CSS, avec des espaces propres et des effets réactifs pour les thèmes clairs et sombres.
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.