Componente de inicio de sesión social
Un componente de inicio de sesión social al estilo de Glassmorphism en escala de grises, con soporte para el modo oscuro, adecuado para sitios de comercio electrónico. El diseño es responsivo e incluye efectos de vidrio esmerilado y desenfoque. No se incluye JavaScript.
Código 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>
Componentes relacionados
Componente de inicio de sesión social
Un componente de inicio de sesión social simple y receptivo que usa colores en escala de grises y estilo de diseño de microinteracciones, con soporte para temas oscuros que usa Tailwind CSS. Cuenta con sutiles animaciones de desplazamiento para íconos sociales.
Componente de inicio de sesión social
Un componente de inicio de sesión social simple, limpio y receptivo con una paleta de colores verde bosque, diseñado para sitios web de noticias/periodismo, que enfatiza la tipografía y los sistemas de cuadrícula. Incluye soporte para modo oscuro.
Componente de inicio de sesión social
Componente de inicio de sesión social receptivo con microinteracciones: centrado en animaciones pequeñas y atractivas que responden a las acciones del usuario, combinación de colores complementaria, nivel de complejidad simple, para fines de blog / contenido, con soporte de tema oscuro.