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
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.
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.
Composant de connexion sociale
Composant de connexion sociale avec conception matérielle, couleurs pastel et complexité modérée pour les entreprises/entreprises