Composant de connexion sociale
Un composant de social login de style Glassmorphism en niveaux de gris, avec prise en charge du mode sombre, adapté aux sites e-commerce. Le design est réactif et comprend des effets de verre dépoli et de flou. Aucun JavaScript n’est inclus.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="relative w-full max-w-md p-8 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-2xl shadow-5xl border border-opacity-30 border-white dark:bg-gray-800 dark:bg-opacity-20 dark:border-gray-700 mx-4">
<div class="absolute inset-0 rounded-2xl pointer-events-none" style="background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);"></div>
<div class="relative z-10">
<h2 class="text-3xl font-bold text-gray-800 dark:text-white text-center mb-6">Social Login</h2>
<p class="text-gray-600 dark:text-gray-300 text-center mb-8">Sign in to unlock exclusive shopping features.</p>
<div class="space-y-4">
<button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-medium text-gray-800 dark:text-white bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 hover:bg-opacity-60 dark:hover:bg-opacity-60 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition duration-200 ease-in-out backdrop-filter backdrop-blur-lg">
<img src="https://www.google.com/images/branding/googleg/1x/googleg_standard_color_64dp.png" alt="Google icon" class="h-6 w-6 mr-3">
Sign in with Google
</button>
<button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-medium text-gray-800 dark:text-white bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 hover:bg-opacity-60 dark:hover:bg-opacity-60 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition duration-200 ease-in-out backdrop-filter backdrop-blur-lg">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Facebook_Logo_%282019%29.png" alt="Facebook icon" class="h-6 w-6 mr-3">
Sign in with Facebook
</button>
<button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-medium text-gray-800 dark:text-white bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 hover:bg-opacity-60 dark:hover:bg-opacity-60 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition duration-200 ease-in-out backdrop-filter backdrop-blur-lg">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/Twitter-logo.png" alt="Twitter icon" class="h-6 w-6 mr-3">
Sign in with Twitter
</button>
</div>
<div class="mt-8 text-center">
<p class="text-gray-600 dark:text-gray-300">Don't have an account? <a href="#" class="text-gray-800 dark:text-white font-medium hover:underline">Sign up</a></p>
</div>
</div>
</div>
</div>
Composants associés
Composant de connexion sociale
Composant de connexion sociale de conception matérielle avec schéma de couleurs analogue, complexité simple, à des fins de portefeuille, réactif avec prise en charge du thème sombre.
Composant de connexion sociale
Un composant de social login rétro/vintage conçu pour les plateformes de commerce électronique avec une palette de couleurs pastel et la prise en charge du mode sombre.
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.