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 microinteracciones: centrado en animaciones pequeñas y atractivas que responden a las acciones del usuario, combinación de colores complementaria, nivel de complejidad simple, para fines de blog / contenido, con soporte de tema oscuro.
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 de lujo para la aplicación meteorológica
Un componente de inicio de sesión social elegante y sofisticado diseñado para una aplicación meteorológica/climática, con colores de alto contraste, tipografía refinada y compatibilidad con el modo oscuro. Ofrece múltiples opciones de inicio de sesión y una sensación moderna y premium.