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

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.

Vorschau

HTML-Code 

<div class="flex flex-col items-center p-4 bg-stone-200 dark:bg-stone-800 font-mono">

  <!-- Like Button -->
  <button class="flex items-center justify-center px-6 py-3 mb-4 text-lg font-bold text-stone-900 uppercase bg-stone-400 border-t-4 border-l-4 border-b-0 border-r-0 border-stone-900 dark:text-stone-100 dark:bg-stone-700 dark:border-stone-100">
    <svg class="w-6 h-6 mr-2" 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 10h4v6m0 0l-4 4m4-4L8 4m7 10l-2 2m0 0l-2-2m2 2l2 2"></path></svg>
    Like (120)
  </button>

  <!-- Reactions -->
  <div class="flex space-x-4">
    <button class="p-3 text-xl bg-stone-500 border-t-2 border-l-2 border-b-0 border-r-0 border-stone-900 dark:bg-stone-600 dark:border-stone-100">👍 50</button>
    <button class="p-3 text-xl bg-stone-500 border-t-2 border-l-2 border-b-0 border-r-0 border-stone-900 dark:bg-stone-600 dark:border-stone-100">😂 30</button>
    <button class="p-3 text-xl bg-stone-500 border-t-2 border-l-2 border-b-0 border-r-0 border-stone-900 dark:bg-stone-600 dark:border-stone-100">😢 10</button>
    <button class="p-3 text-xl bg-stone-500 border-t-2 border-l-2 border-b-0 border-r-0 border-stone-900 dark:bg-stone-600 dark:border-stone-100">😍 25</button>
  </div>

</div>

Verwandte Komponenten

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.

Offen

Komponente "Gefällt mir/Reaktions-Buttons"

Eine Retro-/Vintage-Like-/Reaction-Buttons-Komponente, die für Unternehmenswebsites entwickelt wurde, mit Erdtönen und responsivem Design mit Unterstützung für den Dunkelmodus.

Offen

Komponente "Gefällt mir/Reaktions-Buttons"

Eine reaktionsschnelle Like/Reaction Buttons-Komponente mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS. Es verfügt über ein komplementäres Farbschema, das für ein Dashboard geeignet ist, mit moderater Komplexität für interaktive Reaktionsschaltflächen.

Offen