Monospace_Developer_Reaction_Buttons
A simple, responsive like/reaction buttons component inspired by monospace/developer aesthetics with a retro/vintage color scheme, suitable for news and journalism websites. Includes dark mode support.
HTML Code
<div class="flex flex-wrap cursor-pointer font-mono text-gray-800 dark:text-gray-200 bg-gray-50 dark:bg-gray-900 p-4 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm">
<button class="flex items-center space-x-2 px-3 py-1 m-1 rounded-sm border border-gray-400 dark:border-gray-600 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-sm md:text-base">
<span class="text-orange-500 dark:text-orange-400">▶</span>
<span class="hidden sm:inline">Upvote</span>
<span class="text-xs ml-1 dark:text-gray-400">123</span>
</button>
<button class="flex items-center space-x-2 px-3 py-1 m-1 rounded-sm border border-gray-400 dark:border-gray-600 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-sm md:text-base">
<span class="text-blue-500 dark:text-blue-400">★</span>
<span class="hidden sm:inline">Bookmark</span>
<span class="text-xs ml-1 dark:text-gray-400">45</span>
</button>
<button class="flex items-center space-x-2 px-3 py-1 m-1 rounded-sm border border-gray-400 dark:border-gray-600 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-sm md:text-base">
<span class="text-green-600 dark:text-green-500">▀</span>
<span class="hidden sm:inline">Approve</span>
<span class="text-xs ml-1 dark:text-gray-400">89</span>
</button>
<button class="flex items-center space-x-2 px-3 py-1 m-1 rounded-sm border border-gray-400 dark:border-gray-600 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-sm md:text-base">
<span class="text-purple-600 dark:text-purple-500">⋆</span>
<span class="hidden sm:inline">Favorite</span>
<span class="text-xs ml-1 dark:text-gray-400">32</span>
</button>
<button class="flex items-center space-x-2 px-3 py-1 m-1 rounded-sm border border-gray-400 dark:border-gray-600 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-sm md:text-base">
<span class="text-red-500 dark:text-red-400">✗</span>
<span class="hidden sm:inline">Disagree</span>
<span class="text-xs ml-1 dark:text-gray-400">7</span>
</button>
</div>Related Components
Like/Reaction Buttons Component
A Like/Reaction Buttons Component designed in Brutalism style with Tailwind CSS, featuring responsive effects and dark theme support.
Like/Reaction Buttons Component
Like/Reaction Buttons Component coded in HTML with Tailwind CSS, with a Brutalism design, Earth tones color scheme, and Moderate complexity, suitable for E-commerce. Includes responsive design and dark mode support.