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

Komponente "Social-Share-Buttons"

Eine minimalistische Social-Share-Buttons-Komponente, die mit Tailwind CSS entwickelt wurde und reaktionsschnelle Effekte und Unterstützung für dunkle Themen bietet.

Vorschau

HTML-Code 

<div class="flex justify-center items-center space-x-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
        <img src="https://picsum.photos/20/20?random=1" alt="Share on Facebook" class="w-5 h-5 rounded-full">
        <span>Facebook</span>
    </a>
    <a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
        <img src="https://picsum.photos/20/20?random=2" alt="Share on Twitter" class="w-5 h-5 rounded-full">
        <span>Twitter</span>
    </a>
    <a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
        <img src="https://picsum.photos/20/20?random=3" alt="Share on LinkedIn" class="w-5 h-5 rounded-full">
        <span>LinkedIn</span>
    </a>
    <a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
        <img src="https://picsum.photos/20/20?random=4" alt="Share on WhatsApp" class="w-5 h-5 rounded-full">
        <span>WhatsApp</span>
    </a>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .dark\:bg-gray-800 {
        background-color: #2d3748;
    }
    .dark\:text-white {
        color: #fff;
    }
    .dark\:hover\:bg-gray-700 {
        background-color: #4a5568;
    }
}
</style>

Verwandte Komponenten

Social-Share-Schaltflächen

Responsive Social-Share-Buttons-Komponente mit Unterstützung für dunkle Themen, brutalistischem Design, analogem Farbschema und komplexen Interaktionen, erstellt mit Tailwind CSS für eine Portfolio-Website.

Offen

Skeuomorphe Erdtöne Social-Share-Buttons

Eine Reihe von Social-Share-Buttons, die in einem Skeuomorphen Design mit Erdtönen gestaltet sind. Zu den Funktionen gehören responsives Layout und Unterstützung des Dunkelmodus mit interaktiven Presseeffekten beim Hover, die ausschließlich mit HTML- und Tailwind-CSS-Klassen erstellt wurden.

Offen

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.

Offen