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

Social-Share-Buttons Komponente 51

Eine reaktionsschnelle Social-Share-Buttons-Komponente, die nach skeuomorphen Designprinzipien entwickelt wurde, mit Schaltflächen, die reale Objekte nachahmen, und Unterstützung für dunkle Themen. Die Komponente wird mit Tailwind CSS formatiert und enthält Platzhalterbilder aus picsum.photos und Avatare aus randomuser.me.

Vorschau

HTML-Code 

<div class="flex justify-center items-center p-5 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="flex space-x-4">
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on Facebook" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-blue-600 dark:bg-blue-800 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                Facebook
            </a>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on Twitter" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-blue-400 dark:bg-blue-600 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                Twitter
            </a>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on LinkedIn" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-blue-700 dark:bg-blue-900 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                LinkedIn
            </a>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on Instagram" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-pink-500 dark:bg-pink-700 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                Instagram
            </a>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Social-Share-Buttons"

Eine Reihe von Social-Media-Share-Buttons, die mit einer Monospace-/Entwickler-Ästhetik, einem blauen Farbschema und voller Reaktionsfähigkeit gestaltet sind. Enthält Unterstützung für den Dunkelmodus.

Offen

Brutalismus Social-Share-Buttons

Social-Share-Buttons-Komponente mit Brutalismus-Stil, responsiven Effekten und Unterstützung für dunkle Themen, kein Javascript erforderlich

Offen

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