Social Share Buttons Component
A responsive social share buttons component with a 3D design incorporating three-dimensional elements for depth and engagement. It supports dark themes with CSS.
HTML Code
<div class="flex justify-center space-x-4 p-4">
<div class="flex flex-col items-center">
<img src="https://picsum.photos/40/40?random=1" alt="Avatar" class="mb-2 rounded-full shadow-lg">
<a href="#" class="transition transform inline-block bg-blue-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-blue-700">
<i class="fab fa-facebook-f"></i>
</a>
<span class="text-gray-700 dark:text-gray-300">Share on Facebook</span>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/40/40?random=2" alt="Avatar" class="mb-2 rounded-full shadow-lg">
<a href="#" class="transition transform inline-block bg-red-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-red-700">
<i class="fab fa-twitter"></i>
</a>
<span class="text-gray-700 dark:text-gray-300">Share on Twitter</span>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/40/40?random=3" alt="Avatar" class="mb-2 rounded-full shadow-lg">
<a href="#" class="transition transform inline-block bg-green-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-green-700">
<i class="fab fa-linkedin-in"></i>
</a>
<span class="text-gray-700 dark:text-gray-300">Share on LinkedIn</span>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/40/40?random=4" alt="Avatar" class="mb-2 rounded-full shadow-lg">
<a href="#" class="transition transform inline-block bg-purple-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-purple-700">
<i class="fab fa-instagram"></i>
</a>
<span class="text-gray-700 dark:text-gray-300">Share on Instagram</span>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
}
}
</style>Related Components
Social Share Buttons Component
A responsive social share buttons component styled with glassmorphism effects, supporting both light and dark themes.
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.
Social Share Buttons Component
Social Share Buttons Component for Dark Mode UI, uses Tailwind CSS, grayscale color scheme, simple complexity, for portfolio purpose, responsive design with dark theme support.