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

Komponente "Social-Share-Buttons"

Eine skeuomorphe Social-Share-Buttons-Komponente, die für E-Commerce-Websites entwickelt wurde und ein Graustufen-Farbschema und Unterstützung für den Dunkelmodus bietet.

Vorschau

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>

Verwandte Komponenten

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.

Offen

Social-Share-Buttons-Komponente - Musik/Audio

Eine Reihe von Social-Share-Buttons, die für Musik- und Audioplattformen entwickelt wurden und sich durch eine Material-Design-Ästhetik mit gedämpften Farben und Unterstützung des Dunkelmodus auszeichnen. Enthält Schaltflächen für gängige Sharing-Plattformen wie Facebook, Twitter und E-Mail.

Offen

Komponente "Social-Share-Buttons"

Eine Social-Share-Buttons-Komponente im Neumorphism-Stil, die für Geschäfts-/Unternehmenswebsites entwickelt wurde, Erdtöne verwendet und ein dunkles Thema unterstützt.

Offen