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

Komponente "Gefällt mir/Reaktions-Buttons"

Eine Webkomponente mit Like- und Reaction-Schaltflächen mit Mikrointeraktionen und Unterstützung für dunkle Designs mit Tailwind CSS.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center p-4">
  <h2 class="text-xl font-semibold mb-4 dark:text-white">React to this</h2>
  <div class="flex space-x-4">
    <button class="group bg-blue-500 text-white px-4 py-2 rounded-full transition-transform transform hover:scale-105 hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300">
      <span class="flex items-center space-x-2">
        <img src="https://picsum.photos/20/20" alt="like" class="rounded-full">
        <span>Like</span>
      </span>
    </button>
    <button class="group bg-gray-300 text-gray-800 px-4 py-2 rounded-full transition-transform transform hover:scale-105 hover:bg-gray-400 focus:outline-none focus:ring focus:ring-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">
      <span class="flex items-center space-x-2">
        <img src="https://picsum.photos/20/20?random=1" alt="love" class="rounded-full">
        <span>Love</span>
      </span>
    </button>
    <button class="group bg-yellow-500 text-white px-4 py-2 rounded-full transition-transform transform hover:scale-105 hover:bg-yellow-600 focus:outline-none focus:ring focus:ring-yellow-300">
      <span class="flex items-center space-x-2">
        <img src="https://picsum.photos/20/20?random=2" alt="laugh" class="rounded-full">
        <span>Laugh</span>
      </span>
    </button>
    <button class="group bg-red-500 text-white px-4 py-2 rounded-full transition-transform transform hover:scale-105 hover:bg-red-600 focus:outline-none focus:ring focus:ring-red-300">
      <span class="flex items-center space-x-2">
        <img src="https://picsum.photos/20/20?random=3" alt="wow" class="rounded-full">
        <span>Wow</span>
      </span>
    </button>
  </div>
</div>

<style>
  @media (prefers-color-scheme: dark) {
    body {
      background-color: #1a1a1a;
      color: #ffffff;
    }
  }
</style>

Verwandte Komponenten

Neumorphe Like-/Reaction-Tasten

Ein einfacher, reaktionsschneller Satz von "Gefällt mir"-/Reaktionstasten mit einem neumorphen Designstil, einem juwelenfarbenen Farbschema und Unterstützung für den Dunkelmodus, geeignet für Finanz-/Bankschnittstellen.

Offen

Komponente "Gefällt mir/Reaktions-Buttons"

Eine Komponente für Like/Reaction-Schaltflächen im Retro-/Vintage-Stil mit einer Reihe interaktiver Schaltflächen für Reaktionen mit Unterstützung für dunkle Themen und responsivem Design. Diese Komponente eignet sich für ein Dashboard, das es Benutzern ermöglicht, auf verschiedene Elemente in der Benutzeroberfläche zu reagieren.

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