Composant de connexion sociale
Un composant de connexion sociale réactif avec le style glassmorphism, prenant en charge le thème sombre et comportant des espaces réservés pour les images et les avatars.
HTML Code
<div class="flex justify-center items-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 backdrop-blur-lg bg-opacity-30 border border-gray-300 dark:border-gray-700 rounded-xl shadow-lg p-8 w-96">
<h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200 mb-6">Login with</h2>
<div class="flex flex-col">
<a href="#" class="flex items-center justify-center mb-4 p-3 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-300">
<img src="https://picsum.photos/30?random=1" alt="Google" class="h-8 w-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Google</span>
</a>
<a href="#" class="flex items-center justify-center mb-4 p-3 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-300">
<img src="https://picsum.photos/30?random=2" alt="Facebook" class="h-8 w-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Facebook</span>
</a>
<a href="#" class="flex items-center justify-center mb-4 p-3 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-300">
<img src="https://picsum.photos/30?random=3" alt="Twitter" class="h-8 w-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Twitter</span>
</a>
</div>
<div class="flex items-center justify-center mt-6">
<span class="h-px w-full bg-gray-300 dark:bg-gray-600"></span>
<span class="mx-2 text-gray-600 dark:text-gray-400">or</span>
<span class="h-px w-full bg-gray-300 dark:bg-gray-600"></span>
</div>
<div class="mt-6">
<input type="email" placeholder="Email" class="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 transition duration-300 mb-4">
<input type="password" placeholder="Password" class="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 transition duration-300 mb-4">
<button class="w-full p-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-300">Login</button>
</div>
<div class="text-center mt-4">
<a href="#" class="text-blue-500 hover:underline transition duration-300">Forgot Password?</a>
</div>
</div>
</div>Composants associés
Composant de connexion sociale
Un composant de connexion sociale simple et réactif utilisant des couleurs en niveaux de gris et un style de conception Microinteractions, avec prise en charge du thème sombre à l’aide de Tailwind CSS. Dispose d’animations de survol subtiles pour les icônes sociales.
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 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.