Componente de inicio de sesión social
Un componente de inicio de sesión social retro/vintage diseñado para plataformas de comercio electrónico con una combinación de colores pastel y compatibilidad con el modo oscuro.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900 p-6">
<div class="bg-pastel-pink rounded-lg shadow-lg p-8 w-80">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Welcome Back!</h2>
<p class="text-gray-600 dark:text-gray-400 mb-6 text-center">Log in using your favorite social media account</p>
<div class="flex flex-col space-y-4">
<a href="#" class="flex items-center justify-center bg-blue-400 dark:bg-blue-700 text-white rounded-lg p-2 hover:bg-blue-500 dark:hover:bg-blue-600 transition duration-200 ease-in-out">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
Login with Facebook
</a>
<a href="#" class="flex items-center justify-center bg-red-400 dark:bg-red-700 text-white rounded-lg p-2 hover:bg-red-500 dark:hover:bg-red-600 transition duration-200 ease-in-out">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
Login with Google
</a>
<a href="#" class="flex items-center justify-center bg-green-400 dark:bg-green-700 text-white rounded-lg p-2 hover:bg-green-500 dark:hover:bg-green-600 transition duration-200 ease-in-out">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
Login with Twitter
</a>
</div>
<div class="mt-4 text-center">
<p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-400 dark:text-blue-300 hover:underline">Sign up</a></p>
</div>
</div>
</div>Componentes relacionados
Componente de inicio de sesión social
Un componente de inicio de sesión social al estilo de Glassmorphism en escala de grises, con soporte para el modo oscuro, adecuado para sitios de comercio electrónico. El diseño es responsivo e incluye efectos de vidrio esmerilado y desenfoque. No se incluye JavaScript.
Componente de inicio de sesión social
Componente de inicio de sesión social limpio e inspirado en código con una fuente monoespaciada, esquema de color neutro cálido, adecuado para sitios web gubernamentales / de servicio público. Incluye diseño responsivo y soporte para modo oscuro.
Componente de inicio de sesión social
Componente de inicio de sesión social con interfaz de usuario de modo oscuro y efectos receptivos