CyberpunkLikeReactionButtons
A simple, responsive like/reaction buttons component for a marketplace, featuring a cyberpunk aesthetic with ocean blue tones and dark mode support.
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>Related Components
Retro Gaming Reaction Buttons
A complex, retro-themed reaction button component for gaming websites, featuring 'like' and other reaction types with counts, designed with autumn colors and full responsiveness, including dark mode support.
Analogous Dark Mode Like/Reaction Buttons
A complex, responsive Like/Reaction Buttons Component for a portfolio, with a dark mode UI and an analogous color scheme, implemented using pure HTML and Tailwind CSS. It supports dark mode via Tailwind's dark: prefix.
Like/Reaction Buttons Component
A Like/Reaction Buttons component with Glassmorphism design style, featuring frosted glass effects, responsive design, and dark theme support using Tailwind CSS.