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

CyberpunkLikeReactionButtons

Eine einfache, reaktionsschnelle Like-/Reaction-Buttons-Komponente für einen Marktplatz mit Cyberpunk-Ästhetik mit Ozeanblautönen und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<div class="p-4 sm:p-6 bg-gray-900 border border-blue-900 shadow-lg rounded-xl dark:bg-gray-950 dark:border-blue-950">
  <div class="flex justify-around items-center space-x-2">
    <button class="flex items-center space-x-1 p-2 rounded-full transition-all duration-300 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-700 active:scale-95 group">
      <svg class="w-6 h-6 text-blue-400 group-hover:text-blue-200 transition-colors duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path>
      </svg>
      <span class="block text-sm font-semibold text-blue-300 group-hover:text-blue-100 transition-colors duration-300 hidden sm:block">Like</span>
      <span class="text-sm text-blue-500 group-hover:text-blue-300 transition-colors duration-300">2.5K</span>
    </button>

    <button class="flex items-center space-x-1 p-2 rounded-full transition-all duration-300 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-700 active:scale-95 group">
      <svg class="w-6 h-6 text-blue-400 group-hover:text-blue-200 transition-colors duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M18 13v6a2 2 0 01-2 2H4a2 2 0 01-2-2V7a2 2 0 012-2h8l3-3 3 3v6z"></path>
      </svg>
      <span class="block text-sm font-semibold text-blue-300 group-hover:text-blue-100 transition-colors duration-300 hidden sm:block">Save</span>
    </button>

    <button class="flex items-center space-x-1 p-2 rounded-full transition-all duration-300 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-700 active:scale-95 group">
      <svg class="w-6 h-6 text-blue-400 group-hover:text-blue-200 transition-colors duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M15 8a3 3 0 10-2.977-2.977L5.582 12.02A3 3 0 1010.42.977l6.467 6.467a3 3 0 10-.98.98L9.02 8.02A3 3 0 1015 8z"></path>
      </svg>
      <span class="block text-sm font-semibold text-blue-300 group-hover:text-blue-100 transition-colors duration-300 hidden sm:block">Share</span>
    </button>
  </div>
</div>

Verwandte Komponenten

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 Webkomponente mit Like- und Reaction-Schaltflächen mit Mikrointeraktionen und Unterstützung für dunkle Designs mit Tailwind CSS.

Offen

Analoge Like-/Reaktionstasten im Dunkelmodus

Eine komplexe, responsive Like/Reaction Buttons Komponente für ein Portfolio, mit einer Dark-Mode-UI und einem analogen Farbschema, implementiert mit reinem HTML und Tailwind CSS. Es unterstützt den Dunkelmodus über das Präfix dark: von Tailwind.

Offen