Social Share Buttons Component
A responsive social share buttons component styled with glassmorphism effects, supporting both light and dark themes.
HTML Code
<div class="flex justify-center items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg backdrop-blur-lg bg-opacity-30 border border-gray-300 dark:border-gray-600">
<a href="https://facebook.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/40/40?random=1" alt="Facebook" class="rounded-full">
</a>
<a href="https://twitter.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/40/40?random=2" alt="Twitter" class="rounded-full">
</a>
<a href="https://linkedin.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/40/40?random=3" alt="LinkedIn" class="rounded-full">
</a>
<a href="https://instagram.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/40/40?random=4" alt="Instagram" class="rounded-full">
</a>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1F2937;
}
}
</style>
Related Components
Social Share Buttons Component
Responsive Social Share Buttons with Glassmorphism style and vibrant colors, designed for blogs and content consumption.
Social Share Buttons
Social Share Buttons featuring responsive design, dark theme support, and a 3D aesthetic. No JavaScript required.
Social Share Buttons Component
Social Share Buttons Component with Retro/Vintage design, Earth tones color scheme, Simple complexity level, and Responsive design with dark theme support, for Social Media purpose using Tailwind CSS.