Componente de botones OAuth
Un componente de botones OAuth receptivo diseñado para el modo oscuro con una combinación de colores vibrantes, adecuado para sitios web comerciales profesionales.
Código HTML
<div class="min-h-screen bg-gray-900 flex flex-col items-center justify-center p-6">
<h2 class="text-4xl font-bold text-white mb-6">Login with OAuth</h2>
<div class="flex flex-col gap-4 w-full max-w-md">
<a href="#" class="flex items-center justify-center bg-red-600 hover:bg-red-700 dark:bg-red-800 dark:hover:bg-red-700 text-white font-semibold py-3 rounded-md shadow-md transition duration-300">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Google Logo" class="w-6 h-6 mr-3" />
<span>Continue with Google</span>
</a>
<a href="#" class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-800 dark:hover:bg-blue-700 text-white font-semibold py-3 rounded-md shadow-md transition duration-300">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Facebook Logo" class="w-6 h-6 mr-3" />
<span>Continue with Facebook</span>
</a>
<a href="#" class="flex items-center justify-center bg-purple-600 hover:bg-purple-700 dark:bg-purple-800 dark:hover:bg-purple-700 text-white font-semibold py-3 rounded-md shadow-md transition duration-300">
<img src="https://randomuser.me/api/portraits/men/40.jpg" alt="LinkedIn Logo" class="w-6 h-6 mr-3" />
<span>Continue with LinkedIn</span>
</a>
</div>
<p class="mt-6 text-gray-400">Or</p>
<a href="#" class="mt-2 text-white underline">Login with Email</a>
</div>Componentes relacionados
Componente de botones OAuth
Un componente de botones OAuth receptivo diseñado en modo oscuro usando Tailwind CSS, con fondos oscuros y elementos de interfaz de usuario optimizados para entornos con poca luz.
Componente de botones OAuth
Un componente web con botones OAuth diseñados con un estilo skeuomórfico, efectos responsivos y soporte para temas oscuros mediante Tailwind CSS.
Componente de botones OAuth
Componente de botones de inicio de sesión OAuth simple y receptivo con un diseño esqueuomórfico, esquema de color análogo y soporte de modo oscuro, adecuado para plataformas de foros / comunidades.