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.
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
Like-/Reaction-Schaltflächen
Like/Reaction Buttons-Komponente mit Brutalismus-Design, Erdtönen, komplexen Interaktionen, reaktionsschneller, dunkler Themenunterstützung.. Kein JS, reines HTML mit Tailwind.
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.
Retro_Reaction_Buttons_Industrial
Einfache, reaktionsschnelle Komponente für Like-/Reaction-Buttons mit einer Retro-Industrie-Ästhetik, geeignet für Websites von Fertigungs- oder Industrieunternehmen.