Componente Social Login
Un componente di social login in scala di grigi in stile Glassmorphism, con supporto per la modalità scura, adatto per siti di e-commerce. Il design è reattivo e include effetti di vetro smerigliato e sfocatura. Non è incluso alcun JavaScript.
Codice HTML
<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>
Componenti correlati
Componente SocialLogin
Un componente di accesso social reattivo costruito con Tailwind CSS, con sottili microinterazioni al passaggio del mouse e supporto completo per la modalità oscura. Utilizza CDN con icone semplici per i loghi dei social media.
Componente Social Login
Un componente di accesso social reattivo progettato per la modalità scura utilizzando una combinazione di colori monocromatica. Adatto per il consumo di blog e contenuti con funzionalità interattive.
Componente Social Login
Componente di accesso social reattivo con stile Glassmorphism, colori vivaci e supporto per temi scuri.