Componente de botones OAuth
Un componente de botones OAuth simple y receptivo diseñado en estilo esqueuomórfico con una combinación de colores vibrantes, adaptado para plataformas de comercio electrónico y compatible con el modo oscuro.
Código HTML
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-sm mx-auto">
<h2 class="text-2xl font-bold text-center text-blue-600 dark:text-blue-300 mb-4">Sign in with:</h2>
<div class="flex flex-col space-y-4">
<a href="#" class="flex items-center justify-center bg-gradient-to-r from-yellow-400 to-red-500 p-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
<img src="https://picsum.photos/20?1" alt="Google Logo" class="mr-3 rounded-full">
<span class="text-white font-semibold">Google</span>
</a>
<a href="#" class="flex items-center justify-center bg-gradient-to-r from-blue-500 to-indigo-600 p-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
<img src="https://picsum.photos/20?2" alt="Facebook Logo" class="mr-3 rounded-full">
<span class="text-white font-semibold">Facebook</span>
</a>
<a href="#" class="flex items-center justify-center bg-gradient-to-r from-purple-500 to-pink-500 p-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
<img src="https://picsum.photos/20?3" alt="Twitter Logo" class="mr-3 rounded-full">
<span class="text-white font-semibold">Twitter</span>
</a>
</div>
</div>
<style>
/* Adding dark mode support */
@media (prefers-color-scheme: dark) {
.rounded-lg {
background-color: #1f2937; /* Gray-800 */
}
.text-white {
color: #f9fafb; /* Gray-50 */
}
}
</style>Componentes relacionados
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 de estilo Neumorphism diseñado para un blog o una plataforma de consumo de contenido. El componente cuenta con botones para varios proveedores de OAuth con un diseño receptivo, compatibilidad con temas oscuros y un esquema de color monocromático.
Componente de botones OAuth
Componente de botones OAuth con microinteracciones para un portafolio, con un esquema de color vibrante y un diseño simple, con diseño receptivo y soporte de modo oscuro usando Tailwind CSS.