CCHub Logo CCHub Tailwind Collection
Komponenten Like-/Reaction-Schaltflächen Like-/Reaction-Schaltflächen

Like-/Reaction-Schaltflächen

Like/Reaction Buttons-Komponente mit Mikrointeraktionen, Reaktionsfähigkeit und Unterstützung für dunkle Themen

Vorschau

HTML-Code 

<div class="flex items-center justify-center bg-gray-100 dark:bg-gray-800 min-h-screen">
  <div class="flex space-x-4">
    <button class="flex items-center space-x-1 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200 ease-in-out transform hover:scale-110">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.808 2.808l-7.922 8.802a1.995 1.995 0 01-2.808.01z"></path>
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 10h.01M7 10v7a3 3 0 003 3h.01M7 10h10.929c.795 0 1.549-.394 2-.664"></path>
      </svg>
      <span>Like</span>
    </button>
    <button class="flex items-center space-x-1 text-gray-600 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 transition duration-200 ease-in-out transform hover:scale-110">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.84 4.91a2.14 2.14 0 00-3.03 0L12 10.78l-5.81-5.87a2.14 2.14 0 00-3.03 0 2.18 2.18 0 000 3.07L12 17l8.84-8.92a2.18 2.18 0 000-3.07z"></path>
      </svg>
      <span>Love</span>
    </button>
    <button class="flex items-center space-x-1 text-gray-600 dark:text-gray-300 hover:text-yellow-500 dark:hover:text-yellow-400 transition duration-200 ease-in-out transform hover:scale-110">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
      </svg>
      <span>Haha</span>
    </button>
  </div>
</div>

Verwandte Komponenten

Komponente "Gefällt mir/Reaktions-Buttons"

Eine Like/Reaction Buttons-Komponente im Glassmorphism-Designstil mit Milchglaseffekten, responsivem Design und Unterstützung für dunkle Designs mit Tailwind CSS.

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 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