CCHub Logo CCHub Tailwind Collection
Komponenten Social-Share-Schaltflächen Komponente "Social-Share-Buttons"

Komponente "Social-Share-Buttons"

Eine reaktionsschnelle Social-Share-Buttons-Komponente mit einem skeuomorphen Designstil, der reale Gegenstücke nachahmt, mit Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md flex flex-col items-center space-y-4">
    <h2 class="text-lg font-bold">Share this Post</h2>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
            <img src="https://picsum.photos/30/30?random=1" alt="Facebook" class="rounded-full" />
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
            <img src="https://picsum.photos/30/30?random=2" alt="Twitter" class="rounded-full" />
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
            <img src="https://picsum.photos/30/30?random=3" alt="LinkedIn" class="rounded-full" />
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
            <img src="https://picsum.photos/30/30?random=4" alt="Instagram" class="rounded-full" />
        </a>
    </div>
    <div class="text-sm text-gray-600 dark:text-gray-400">
        <p>Connect with us!</p>
    </div>
</div>

Verwandte Komponenten

Social-Share-Schaltflächen

Social-Share-Buttons mit Neumorphismus-Stil, monochromatischem Farbschema und einfacher Komplexität für Business-/Corporate-Websites. Responsives Design mit Unterstützung für dunkle Themen mit Tailwind CSS. Verwendet subtile Schatten für den neumorphen Effekt.

Offen

Social-Share-Schaltflächen

Social-Share-Buttons mit responsivem Design, Unterstützung für dunkle Themen und 3D-Ästhetik. Kein JavaScript erforderlich.

Offen

Komponente "Social-Share-Buttons"

Responsive Social-Share-Buttons im Glassmorphism-Stil und leuchtenden Farben, die für Blogs und den Konsum von Inhalten entwickelt wurden.

Offen