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.
Código HTML
<div class="flex justify-center items-center space-x-4 p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
<button class="flex items-center px-4 py-2 text-white bg-blue-600 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
Sign in with Google
</button>
<button class="flex items-center px-4 py-2 text-white bg-red-600 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
Sign in with Facebook
</button>
<button class="flex items-center px-4 py-2 text-white bg-blue-800 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-opacity-50">
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
Sign in with Twitter
</button>
</div>
<style>
/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
button {
background-color: #1e3a8a;
}
}
</style>Componentes relacionados
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.
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.
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.