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.
Código HTML
```html
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 p-4">
<div class="w-full max-w-sm">
<h2 class="text-2xl font-bold text-center text-gray-200 mb-6">Sign In</h2>
<button class="w-full bg-blue-300 text-blue-900 py-2 px-4 rounded-md flex items-center justify-center mb-4 hover:bg-blue-400 transition duration-300">
<img src="https://img.icons8.com/color/16/000000/google-logo.png" alt="Google Icon" class="mr-2">
Sign in with Google
</button>
<button class="w-full bg-gray-300 text-gray-800 py-2 px-4 rounded-md flex items-center justify-center mb-4 hover:bg-gray-400 transition duration-300">
<img src="https://img.icons8.com/ios-filled/16/000000/github.png" alt="GitHub Icon" class="mr-2 dark:filter dark:invert">
Sign in with GitHub
</button>
<button class="w-full bg-blue-500 text-white py-2 px-4 rounded-md flex items-center justify-center hover:bg-blue-600 transition duration-300">
<img src="https://img.icons8.com/ios-filled/16/ffffff/facebook-new.png" alt="Facebook Icon" class="mr-2">
Sign in with Facebook
</button>
</div>
</div>
```
Componentes relacionados
Componente de botones OAuth
Un componente de botones OAuth responsivo con un estilo de diseño 3D, compatibilidad con temas oscuros e imágenes de marcador de posición. El componente cuenta con botones para Google, Facebook, Twitter y LinkedIn, con efectos de desplazamiento para mayor profundidad y participación.
Componente de botones OAuth
Componente de botones de inicio de sesión OAuth simple y receptivo con un diseño esqueuomórfico, esquema de color análogo y soporte de modo oscuro, adecuado para plataformas de foros / comunidades.
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.