Components Social Share Buttons Social Share Buttons Component

Social Share Buttons Component

A skeuomorphic social share buttons component designed for e-commerce websites, featuring a grayscale color scheme and dark mode support.

Preview

HTML Code

<div class="flex justify-center p-4 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg">
    <div class="flex space-x-4">
        <a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
            <img src="https://picsum.photos/24?random=1" alt="Share on Facebook" class="mr-2 rounded-full">
            <span class="text-gray-700 dark:text-gray-200">Share on Facebook</span>
        </a>
        <a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
            <img src="https://picsum.photos/24?random=2" alt="Share on Twitter" class="mr-2 rounded-full">
            <span class="text-gray-700 dark:text-gray-200">Share on Twitter</span>
        </a>
        <a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
            <img src="https://picsum.photos/24?random=3" alt="Share on Instagram" class="mr-2 rounded-full">
            <span class="text-gray-700 dark:text-gray-200">Share on Instagram</span>
        </a>
        <a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
            <img src="https://picsum.photos/24?random=4" alt="Share via Email" class="mr-2 rounded-full">
            <span class="text-gray-700 dark:text-gray-200">Share via Email</span>
        </a>
    </div>
</div>

Related Components

Social Share Buttons Component

A responsive social share buttons component with a skeuomorphic design style that mimics real-world counterparts, featuring dark theme support.

Open

Social Share Buttons Component

Social Share Buttons Component with Brutalism style, responsive effects, and dark theme support using Tailwind CSS.

Open

Skeuomorphic Social Share Buttons

Responsive Social Share Buttons Component with Skeuomorphic design, Monochromatic color scheme, and Complex interactions, with dark theme support. Designed for blogs and content sites.

Open