Componente de inicio de sesión social: microinteracciones
Una tarjeta de componente de inicio de sesión social que usa Tailwind CSS, con microinteracciones en los botones (efecto de escala al pasar el mouse/focus), capacidad de respuesta (ancho máximo centrado) y soporte de temas oscuros. Utiliza una imagen de marcador de posición de picsum.photos y SVG incrustados para iconos sociales. Sin JavaScript.
Código HTML
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/400/200" alt="Login Header" class="w-full h-32 object-cover rounded-t-lg">
<div class="p-6">
<h2 class="text-center text-2xl font-bold text-gray-800 dark:text-white mb-6">Login or Sign Up</h2>
<div class="flex flex-col gap-4">
<!-- Google Button -->
<button class="flex items-center justify-center w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 ease-in-out transform hover:scale-105 focus:scale-105">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M19 9.4v2.9h-4.6V14h4.6c-.2 1.6-1.5 2.9-3.1 3.4-.9.3-1.9.5-2.9.5-3.5 0-6.4-2.3-7.4-5.6-.3-1.1-.5-2.3-.5-3.5s.2-2.4.5-3.5C6.6 5.3 9.5 3 13 3c1.1 0 2.1.2 3.1.5 1.7.6 3 1.9 3.1 3.4h-2.9c-.2-.9-.8-1.6-1.7-2-1.1-.5-2.3-.7-3.4-.7-2.3 0-4.3 1.5-5 3.5-.2.6-.3 1.2-.3 1.9s.1 1.3.3 1.9c.8 2 2.7 3.5 5 3.5 1.1 0 2-.2 2.9-.6.9-.4 1.6-1.1 1.8-2z"/>
</svg>
Login with Google
</button>
<!-- Facebook Button -->
<button class="flex items-center justify-center w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 ease-in-out transform hover:scale-105 focus:scale-105">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.505 1.492-3.89 3.776-3.89 1.095 0 2.245.195 2.245.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22.001c4.78-.75 8.437-4.888 8.437-9.879z"/>
</svg>
Login with Facebook
</button>
<!-- Twitter Button -->
<button class="flex items-center justify-center w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 ease-in-out transform hover:scale-105 focus:scale-105">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M23.643 4.937c-.835.37-1.732.62-2.675.733 1.013-.6 1.793-1.553 2.153-2.67.952-.1 1.851-.244 2.728-.46-.928 1.23-2.2 2.122-3.652 2.614C16.683 3.914 15.022 3 13.104 3c-3.54 0-6.417 2.877-6.417 6.417 0 .505.057.995.167 1.47-.573-.028-1.134-.178-1.67-.442-1.827 2.942-4.597 4.916-7.742 5.553-.2.042-.395.072-.592.103.794 2.485 3.04 4.317 5.694 4.729C5.33 20.65 4.06 21 2.7 21c-.18 0-.356-.01-.53-.025 2.36 1.493 5.177 2.373 8.197 2.373 9.895 0 15.304-8.203 15.304-15.31 0-.234-.005-.468-.014-.7C22.056 6.61 22.963 5.834 23.643 4.937z"/>
</svg>
Login with Twitter
</button>
</div>
</div>
</div>Componentes relacionados
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.
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.
Componente de inicio de sesión social
Un componente de inicio de sesión social complejo y receptivo diseñado para paneles. Utiliza una interfaz de usuario de modo oscuro con un esquema de color en escala de grises. Cuenta con botones de proveedor de redes sociales, un formulario de correo electrónico / contraseña, un interruptor "Recuérdame" y un separador con opciones de inicio de sesión alternativas. Totalmente responsivo con ilustración de imagen y utiliza Tailwind CSS con prefijo dark: para soporte de tema oscuro. No se necesita JavaScript.