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.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<h2 class="text-2xl font-bold text-green-700 dark:text-green-400 mb-4 animate-pulse">Sign in with</h2>
<button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-brown-600 rounded-lg shadow-md hover:shadow-lg dark:bg-brown-800 transition ease-in-out duration-300 transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/men/11.jpg" alt="Google Logo" class="w-6 h-6 rounded-full mr-2" />
Google
</button>
<button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-blue-600 rounded-lg shadow-md hover:shadow-lg dark:bg-blue-800 transition ease-in-out duration-300 transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/women/26.jpg" alt="Facebook Logo" class="w-6 h-6 rounded-full mr-2" />
Facebook
</button>
<button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-gray-700 rounded-lg shadow-md hover:shadow-lg dark:bg-gray-800 transition ease-in-out duration-300 transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/men/20.jpg" alt="Twitter Logo" class="w-6 h-6 rounded-full mr-2" />
Twitter
</button>
<button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-orange-600 rounded-lg shadow-md hover:shadow-lg dark:bg-orange-800 transition ease-in-out duration-300 transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/women/12.jpg" alt="GitHub Logo" class="w-6 h-6 rounded-full mr-2" />
GitHub
</button>
</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 para botones de autenticación OAuth con estilo de neumorfismo, diseñado para una cartera, e incluye un diseño responsivo con soporte para temas oscuros.
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.