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

Komponente "Social-Share-Buttons"

Eine Retro-/Vintage-Komponente für Social-Share-Buttons mit einem monochromen Farbschema. Es handelt sich um ein komplexes, responsives Design mit Unterstützung für dunkle Themen, das für ein Portfolio geeignet ist. Verwendet Tailwind CSS ohne JavaScript.

Offen

Retro-Schaltflächen zum Teilen in sozialen Netzwerken

Social-Share-Buttons-Komponente mit Retro-/Vintage-Design, responsiven Effekten und Unterstützung für dunkle Themen mit Tailwind CSS, kein JavaScript erforderlich.

Offen

Komponente "Social-Share-Buttons"

Social-Share-Buttons-Komponente mit Brutalismus-Design, lebendigem Farbschema und komplexer Komplexität für E-Commerce, mit responsivem Design und Unterstützung für dunkle Themen mit Tailwind CSS. Kein JavaScript.

Offen