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 1 de los botones OAuth
Un componente que muestra botones OAuth con animaciones atractivas y compatibilidad con el modo oscuro, utilizando Tailwind CSS para el diseño. Los botones responden a las acciones del usuario con microinteracciones sutiles, y se incluyen imágenes de fuentes de marcadores de posición aleatorios.
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.
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.