Social Share Buttons Component
Responsive Social Share Buttons with Glassmorphism style and vibrant colors, designed for blogs and content consumption.
HTML Code
<div class="flex flex-col items-center p-5 bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-40">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Share this Post</h2>
<div class="flex space-x-4">
<a href="#" class="flex items-center justify-center p-3 bg-red-500 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-200"
aria-label="Share on Facebook">
<img src="https://picsum.photos/30/30" class="h-8 w-8 rounded-full" alt="Facebook">
<span class="text-white ml-2">Facebook</span>
</a>
<a href="#" class="flex items-center justify-center p-3 bg-blue-500 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-200"
aria-label="Share on Twitter">
<img src="https://picsum.photos/30/30" class="h-8 w-8 rounded-full" alt="Twitter">
<span class="text-white ml-2">Twitter</span>
</a>
<a href="#" class="flex items-center justify-center p-3 bg-purple-500 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-200"
aria-label="Share on LinkedIn">
<img src="https://picsum.photos/30/30" class="h-8 w-8 rounded-full" alt="LinkedIn">
<span class="text-white ml-2">LinkedIn</span>
</a>
</div>
</div>Related Components
Social Share Buttons Component - Music/Audio
A set of social share buttons designed for music and audio platforms, featuring a Material Design aesthetic with muted colors and supporting dark mode. Includes buttons for common sharing platforms like Facebook, Twitter, and Email.
Neumorphic Social Share Buttons - Job/Career Theme
A set of social share buttons designed with a soft neumorphic style and cheerful candy colors, suitable for job boards or career platforms. Features responsive design and dark mode support.
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.