CCHub Logo CCHub Tailwind Collection
Komponenten Like-/Reaction-Schaltflächen Komponente "Gefällt mir/Reaktions-Buttons"

Komponente "Gefällt mir/Reaktions-Buttons"

Eine reaktionsschnelle Like/Reaction-Buttons-Komponente, die unter Berücksichtigung von Mikrointeraktionen entwickelt wurde, ein monochromatisches Farbschema verwendet, das für den Konsum von Blogs und Inhalten geeignet ist, mit Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="flex flex-col items-center p-4 space-y-4 bg-gray-200 dark:bg-gray-800 rounded-md shadow-md">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Engage with this post!</h2>
    <div class="flex space-x-4">
        <button class="relative group p-2 rounded-full text-blue-600 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-600 transition duration-300 ease-in-out">
            <img src="https://picsum.photos/35/35" alt="Like" class="rounded-full">
            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Like</span>
        </button>
        <button class="relative group p-2 rounded-full text-green-600 dark:text-green-300 hover:bg-green-100 dark:hover:bg-green-600 transition duration-300 ease-in-out">
            <img src="https://picsum.photos/35/35" alt="Love" class="rounded-full">
            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Love</span>
        </button>
        <button class="relative group p-2 rounded-full text-red-600 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-600 transition duration-300 ease-in-out">
            <img src="https://picsum.photos/35/35" alt="Angry" class="rounded-full">
            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Angry</span>
        </button>
    </div>
    <p class="text-sm text-gray-600 dark:text-gray-400">Your reactions help us improve!</p>
</div>

Verwandte Komponenten

Komponente "Gefällt mir/Reaktions-Buttons"

Like/Reaction Buttons Komponente, die in HTML mit Tailwind CSS codiert ist, mit einem Brutalismus-Design, einem Farbschema in Erdtönen und moderater Komplexität, geeignet für E-Commerce. Beinhaltet Unterstützung für responsives Design und Dunkelmodus.

Offen

Komponente "Gefällt mir/Reaktions-Buttons"

Eine komplexe Like/Reaction Buttons-Komponente mit Mikrointeraktionen, analogem Farbschema, responsivem Design und Unterstützung für dunkle Themen, geeignet für ein Dashboard. Verwendet Tailwind CSS und enthält mehrere interaktive Elemente mit ansprechenden Animationen.

Offen

Komponente "Gefällt mir/Reaktions-Buttons"

Eine Like/Reaction Buttons-Komponente im Glassmorphism-Stil mit responsiven Effekten und Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS.

Offen