Componente de botones para compartir en redes sociales
Un componente responsivo de botones para compartir en redes sociales diseñado en un estilo de cristal con un esquema de color monocromático para sitios de comercio electrónico. Cuenta con elementos translúcidos similares al vidrio esmerilado, incluye múltiples botones interactivos para compartir en las redes sociales y es compatible con el modo oscuro con Tailwind CSS.
Código HTML
<div class="flex justify-center items-center p-6 bg-white dark:bg-gray-800 bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg space-x-4">
<div class="flex flex-col items-center">
<img src="https://picsum.photos/200/200" alt="Product Image" class="w-24 h-24 rounded-lg mb-2">
<h2 class="text-lg text-gray-800 dark:text-gray-200">Share this product</h2>
</div>
<div class="flex space-x-4">
<a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500 text-white hover:bg-blue-700 transition-all duration-300 shadow-lg dark:bg-blue-600 dark:hover:bg-blue-800">
<img src="https://img.icons8.com/ios-filled/50/ffffff/facebook-new.png" alt="Facebook" class="w-6 h-6">
</a>
<a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-400 text-white hover:bg-blue-600 transition-all duration-300 shadow-lg dark:bg-blue-500 dark:hover:bg-blue-700">
<img src="https://img.icons8.com/ios-filled/50/ffffff/twitter.png" alt="Twitter" class="w-6 h-6">
</a>
<a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-pink-500 text-white hover:bg-pink-700 transition-all duration-300 shadow-lg dark:bg-pink-600 dark:hover:bg-pink-800">
<img src="https://img.icons8.com/ios-filled/50/ffffff/instagram-new.png" alt="Instagram" class="w-6 h-6">
</a>
<a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-red-500 text-white hover:bg-red-700 transition-all duration-300 shadow-lg dark:bg-red-600 dark:hover:bg-red-800">
<img src="https://img.icons8.com/ios-filled/50/ffffff/pinterest.png" alt="Pinterest" class="w-6 h-6">
</a>
</div>
</div>Componentes relacionados
Componente de botones para compartir en redes sociales
Un componente de botón de compartir en redes sociales receptivo para sitios web de comida/restaurantes, con un degradado de arco iris, microinteracciones al pasar el cursor y soporte completo para el modo oscuro.
Componente de botones para compartir en redes sociales
Un componente de botones para compartir en redes sociales de estilo Neumorphism diseñado para sitios web empresariales/corporativos, que utiliza tonos tierra y admite un tema oscuro.
Componente de botones para compartir en redes sociales
Componente de botones para compartir en redes sociales para la interfaz de usuario del modo oscuro, utiliza Tailwind CSS, esquema de color en escala de grises, complejidad simple, para fines de cartera, diseño receptivo con soporte para temas oscuros.