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

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.

Vorschau

HTML-Code 

<div class="flex justify-center items-center space-x-4 p-6 bg-white bg-opacity-10 backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-30">
    <div class="flex items-center space-x-2">
        <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <span class="text-lg text-gray-900 dark:text-white">Like</span>
    </div>
    <button class="flex items-center p-2 text-white bg-blue-500 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 focus:outline-none">
        <span class="material-icons"> thumb_up </span>
    </button>
    <button class="flex items-center p-2 text-white bg-red-500 rounded-full transition duration-300 ease-in-out hover:bg-red-600 focus:outline-none">
        <span class="material-icons"> favorite </span>
    </button>
    <button class="flex items-center p-2 text-white bg-yellow-500 rounded-full transition duration-300 ease-in-out hover:bg-yellow-600 focus:outline-none">
        <span class="material-icons"> sentiment_satisfied </span>
    </button>
</div>

<style>
    /* Add Material Icons font link */
    @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
</style>

Verwandte Komponenten

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.

Offen

Komponente "Gefällt mir/Reaktions-Buttons"

Eine Neumorphism-artige Like/Reaction-Buttons-Komponente für Blogs mit komplexem Design und Unterstützung für den Dunkelmodus.

Offen

Komponente "Gefällt mir/Reaktions-Buttons"

Eine Webkomponente mit Like- und Reaction-Schaltflächen, die in einem skeuomorphen Stil gestaltet sind, mit responsiven Effekten und Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS.

Offen