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 con interfaz de usuario de modo oscuro y efectos receptivos
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.
Componente de inicio de sesión social
Un componente de inicio de sesión social de modo oscuro receptivo diseñado para un tablero, con un esquema de color triádico y elementos interactivos enriquecidos. Incluye opciones de inicio de sesión con varias plataformas sociales, visualización de datos de usuario y controles.