Componente del botón Seguir
Un componente complejo del botón de seguimiento diseñado con un efecto de morfismo de vidrio, utilizando un esquema de color complementario, adecuado para aplicaciones de comercio electrónico, con diseño receptivo y soporte de tema oscuro.
Código HTML
<div class="flex justify-center items-center h-screen bg-gray-900 dark:bg-gray-800">
<div class="bg-white bg-opacity-30 backdrop-blur-lg border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg p-6 w-80">
<div class="flex flex-col items-center">
<img class="rounded-full w-16 h-16 mb-4" src="https://i.pravatar.cc/300" alt="User Avatar">
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Follow Us</h2>
<p class="text-gray-600 dark:text-gray-300 text-center mb-4">Join our community and stay updated with the latest deals and offers!</p>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">
Follow
</button>
<div class="flex items-center justify-between mt-4 w-full">
<img class="rounded-full w-8 h-8 border-2 border-white" src="https://picsum.photos/50/50?random=1" alt="Image 1">
<img class="rounded-full w-8 h-8 border-2 border-white" src="https://picsum.photos/50/50?random=2" alt="Image 2">
<img class="rounded-full w-8 h-8 border-2 border-white" src="https://picsum.photos/50/50?random=3" alt="Image 3">
</div>
</div>
</div>
</div>Componentes relacionados
Componente del botón Seguir
Un componente complejo del botón 'Seguir' con microinteracciones, esquema de color sepia/marrón, diseño receptivo y soporte de modo oscuro, adecuado para plataformas de blogs/contenido.
Componente del botón de seguimiento neumórfico
Un componente complejo e interactivo del botón de seguimiento neumórfico con tonos océano/azul, diseñado para interfaces de redes sociales. Incluye soporte para modo oscuro y diseño responsivo.
Componente del botón Seguir
Un componente de botón "Seguir" complejo y receptivo con degradado y transiciones de color apagadas, diseñado para plataformas inmobiliarias. Incluye soporte para el modo oscuro y utiliza HTML semántico.