Componente de botones OAuth
Un conjunto de botones OAuth diseñados con una estética brutalista y Tailwind CSS, con efectos responsivos y soporte para temas oscuros.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<h1 class="text-4xl font-extrabold text-black dark:text-white mb-5">Login with</h1>
<div class="flex space-x-4">
<a href="#" class="bg-blue-500 dark:bg-blue-700 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-blue-400 dark:hover:bg-blue-600 transition-all duration-300 transform hover:scale-105">
<img src="https://picsum.photos/30?random=1" alt="OAuth Provider 1" class="inline-block mr-2 rounded-full">
Provider 1
</a>
<a href="#" class="bg-red-500 dark:bg-red-700 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-red-400 dark:hover:bg-red-600 transition-all duration-300 transform hover:scale-105">
<img src="https://picsum.photos/30?random=2" alt="OAuth Provider 2" class="inline-block mr-2 rounded-full">
Provider 2
</a>
<a href="#" class="bg-green-500 dark:bg-green-700 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-green-400 dark:hover:bg-green-600 transition-all duration-300 transform hover:scale-105">
<img src="https://picsum.photos/30?random=3" alt="OAuth Provider 3" class="inline-block mr-2 rounded-full">
Provider 3
</a>
</div>
</div>Componentes relacionados
Componente de botones OAuth
Un componente de botones OAuth receptivo con diseño de skeuomorfismo, combinación de colores análoga e interacciones complejas, adecuado para interfaces de redes sociales. Incluye soporte para temas oscuros y utiliza Tailwind CSS para el estilo, sin JavaScript. Imágenes extraídas de Lorem Picsum y RandomUser.me.
Componente de botones OAuth
Un componente web complejo para botones OAuth con estilo de cristal y tonos tierra, diseñado para sitios web empresariales/corporativos con capacidad de respuesta y compatibilidad con modo oscuro.
Componente de botones OAuth
Componente de botones OAuth receptivos para la interfaz de usuario de comercio electrónico en modo oscuro con esquema de color pastel.