Componente de inicio de sesión social
Un componente de inicio de sesión social receptivo diseñado para el modo oscuro con un esquema de color monocromático. Adecuado para el consumo de blogs y contenido con funciones interactivas.
Código HTML
<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto mt-10">
<h2 class="text-2xl font-bold mb-4 text-center">Log in with Social Media</h2>
<div class="flex flex-col space-y-4">
<a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span>Log in with Facebook</span>
</a>
<a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span>Log in with Google</span>
</a>
<a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span>Log in with Twitter</span>
</a>
</div>
<p class="mt-4 text-center text-gray-400">Or, <a href="#" class="text-gray-300 hover:underline">create a new account</a></p>
</div>Componentes relacionados
Componente de inicio de sesión social de Material Design
Componente de inicio de sesión social de Material Design con esquema de color complementario, complejidad moderada, para fines de blog / contenido, receptivo con soporte de modo oscuro usando Tailwind CSS.
Componente de inicio de sesión social
Componente de inicio de sesión social receptivo con estilo Glassmorphism, colores vibrantes y soporte para temas oscuros.
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.