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 complejo para un mercado, con botones de inicio de sesión social, campos de correo electrónico/contraseña y enlaces de "olvidé mi contraseña"/"registro". Diseñado con los principios de Material Design utilizando tonos joya, capacidad de respuesta total y compatibilidad con modo oscuro.
Componente de inicio de sesión social - Bienes raíces (acuarela/neón)
Un componente de inicio de sesión social simple y receptivo para plataformas de bienes raíces, con un estilo artístico / acuarela con un esquema de color neón / eléctrico. Incluye soporte para modo oscuro y HTML semántico.
Brutalista Social Login (Moda/Belleza)
Un componente de inicio de sesión social brutalista complejo y vibrante diseñado para marcas de moda y belleza, con alto contraste, elementos audaces y capacidad de respuesta total con soporte para modo oscuro.