Composant Boutons de partage social
Un composant réactif de boutons de partage social conçu dans un style glassmorphism avec une palette de couleurs monochromatiques pour les sites de commerce électronique. Il comporte des éléments translucides givrés ressemblant à du verre, comprend plusieurs boutons interactifs pour le partage sur les réseaux sociaux et prend en charge le mode sombre à l’aide de Tailwind CSS.
HTML Code
<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>
Composants associés
Composant Boutons de partage social
Un ensemble de boutons de partage de médias sociaux conçus avec une esthétique monospace/développeur, une palette de couleurs bleues d’entreprise et une réactivité totale. Inclut la prise en charge du mode sombre.
Composant Boutons de partage social
Un composant réactif de boutons de partage social avec une conception 3D incorporant des éléments tridimensionnels pour plus de profondeur et d’engagement. Il prend en charge les thèmes sombres avec CSS.
Composant Boutons de partage social
Un composant réactif de boutons de partage social stylisé avec des effets de glassmorphism, prenant en charge les thèmes clairs et sombres.