Social Share Buttons Component
Social Share Buttons Component with Brutalism design, Vibrant color scheme, and Complex complexity level for E-commerce, with responsive design and dark theme support using Tailwind CSS. No JavaScript.
HTML Code
<div class="bg-yellow-400 p-6 min-h-screen flex items-center justify-center dark:bg-gray-900">
<div class="flex flex-wrap space-x-4">
<!-- Share Button 1 -->
<button class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-none border-4 border-black dark:bg-red-800 dark:border-white transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-red-500">
Share on X
</button>
<!-- Share Button 2 -->
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-none border-4 border-black dark:bg-blue-800 dark:border-white transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-blue-500">
Share on Facebook
</button>
<!-- Share Button 3 -->
<button class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-none border-4 border-black dark:bg-green-800 dark:border-white transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-green-500">
Share on LinkedIn
</button>
<!-- Share Button 4 -->
<button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-none border-4 border-black dark:bg-purple-800 dark:border-white transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-purple-500">
Share on Pinterest
</button>
<!-- Share Button 5 -->
<button class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-none border-4 border-black dark:bg-pink-800 dark:border-white transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-pink-500">
Copy Link
</button>
</div>
</div>Related Components
Retro Social Share Buttons
Social Share Buttons Component with Retro/Vintage design, responsive effects, and dark theme support using Tailwind CSS, no JavaScript needed.
Social Share Buttons Component
Social Share Buttons Component with microinteractions, grayscale color scheme, moderate complexity for social media interfaces, responsive design with dark theme support.
Social Share Buttons Component 51
A responsive social share buttons component designed with skeuomorphic design principles, featuring buttons that mimic real-world objects and support for dark theme. The component is styled using Tailwind CSS and includes placeholder images from picsum.photos and avatars from randomuser.me.