Componente de botones OAuth
Componente de botones OAuth de Glassmorphism con efectos responsivos y soporte para temas oscuros.
Código HTML
<section class="relative bg-gray-100 dark:bg-gray-900 py-20">
<div class="absolute inset-0 bg-cover bg-center backdrop-filter backdrop-blur-lg" style="background-image: url('https://picsum.photos/1920/1080');"></div>
<div class="relative container mx-auto px-4">
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 rounded-xl shadow-lg p-8">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Login</h2>
<div class="flex flex-col space-y-4">
<button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<img class="h-5 w-5 mr-2" src="/placeholder-google-logo.png" alt="Google Logo">
Sign in with Google
</button>
<button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<img class="h-5 w-5 mr-2" src="/placeholder-facebook-logo.png" alt="Facebook Logo">
Sign in with Facebook
</button>
<button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<img class="h-5 w-5 mr-2" src="/placeholder-twitter-logo.png" alt="Twitter Logo">
Sign in with Twitter
</button>
</div>
</div>
</div>
</section>Componentes relacionados
Componente de botones OAuth
Un componente de botones OAuth receptivo diseñado con animaciones atractivas y colores de tono tierra, adecuado para interfaces de redes sociales y compatible con temas oscuros.
Componente de botones OAuth (modo oscuro, monocromático)
Componente de botones OAuth responsivo con soporte de modo oscuro mediante Tailwind CSS. Utiliza un esquema de color monocromático con fondos oscuros.
RetroOAuthButtons
Un componente de botones OAuth simple de temática retro con un esquema de color triádico, ideal para un sitio de portafolio. Cuenta con un diseño responsivo y compatibilidad con el modo oscuro, que recuerda a la estética de los años 80/90.