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

Skeuomorphe Social-Share-Buttons

Eine Reihe von Social-Share-Buttons, die mit einem Skeuomorphic-Design unter Verwendung von Tailwind CSS gestaltet sind. Verfügt über Farbverläufe, Schatten und Hover-/Aktiv-Effekte, um physische Tasten zu simulieren. Die Komponente ist reaktionsschnell und enthält Unterstützung für den Dunkelmodus über CSS. Enthält Schaltflächen für Facebook, Twitter, LinkedIn und eine generische Schaltfläche zum Kopieren von Links.

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

Komponente "Social-Share-Buttons"

Social Share Buttons-Komponente mit Retro / Vintage-Design, Farbschema in Erdtönen, einfacher Komplexitätsstufe und responsivem Design mit Unterstützung für dunkle Themen für Social-Media-Zwecke mit Tailwind CSS.

Offen