Componente de inicio de sesión social
Un componente de inicio de sesión social minimalista diseñado con Tailwind CSS, con espacios limpios y efectos responsivos para temas claros y oscuros.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-800 shadow-md rounded-lg p-8 w-96">
<h2 class="text-lg font-semibold text-center text-gray-800 dark:text-gray-200">Login with</h2>
<div class="mt-4">
<button class="flex items-center justify-center w-full p-2 mb-4 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition duration-200">
<img src="https://picsum.photos/20/20" alt="Google Logo" class="mr-2 rounded-full">
Google
</button>
<button class="flex items-center justify-center w-full p-2 mb-4 bg-gray-600 hover:bg-gray-700 text-white rounded-md transition duration-200">
<img src="https://randomuser.me/api/portraits/med/men/50.jpg" alt="Facebook Logo" class="mr-2 rounded-full">
Facebook
</button>
<button class="flex items-center justify-center w-full p-2 mb-4 bg-red-600 hover:bg-red-700 text-white rounded-md transition duration-200">
<img src="https://picsum.photos/20/20" alt="Twitter Logo" class="mr-2 rounded-full">
Twitter
</button>
</div>
<div class="text-center">
<p class="text-gray-600 dark:text-gray-300">or</p>
<a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-600">Sign in with email</a>
</div>
</div>
</div>Componentes relacionados
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
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.
Neumorphic_Gaming_Social_Login_Component
Un componente de inicio de sesión social complejo y receptivo en un estilo neumórfico con tonos tierra, diseñado para sitios web de juegos. Incluye múltiples opciones de inicio de sesión y soporte para el modo oscuro.