Social Share Buttons Component
A responsive social share buttons component designed in a glassmorphism style with a monochromatic color scheme for e-commerce sites. It features frosted glass-like translucent elements, includes multiple interactive buttons for sharing on social media, and has dark mode support using 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>Related Components
Social Share Buttons Component
Social Share Buttons Component with Brutalism style, responsive effects, and dark theme support using Tailwind CSS.
Social Share Buttons Component
A minimalist social share buttons component designed for dashboards, featuring a vibrant color scheme and responsive design, with dark mode support.
Social Share Buttons
Social Share Buttons with Neumorphism style, Monochromatic color scheme, and Simple complexity for Business/Corporate websites. Responsive design with dark theme support using Tailwind CSS. Uses subtle shadows for the neumorphic effect.