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
Componente de inicio de sesión social
Un componente de inicio de sesión social simple y esqueumórfico con colores complementarios, adecuado para un blog o sitio de contenido, diseñado para ser receptivo y admitir el 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.
Componente de inicio de sesión social minimalista
Componente de inicio de sesión social minimalista en escala de grises para comercio electrónico, simple, receptivo, soporte de tema oscuro, sin JavaScript