Components Like/Reaction Buttons Monospace_Developer_Reaction_Buttons

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.

Preview

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">&#9654;</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">&#9733;</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">&#9600;</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">&#x22C6;</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">&#x2717;</span>
    <span class="hidden sm:inline">Disagree</span>
    <span class="text-xs ml-1 dark:text-gray-400">7</span>
  </button>
</div>

Related Components

Skeuomorphic Reaction Buttons

A set of like and reaction buttons with a Skeuomorphic design style, supporting responsive layouts and dark mode. The buttons are implemented purely with HTML and Tailwind CSS, with no JavaScript. Dark mode is handled via CSS classes. Placeholder images are used for avatars.

Open

NeumorphismLikeReactionButtons

Responsive Like/Reaction Buttons Component for blog/content with dark theme support and Neumorphism design.

Open

Like/Reaction Buttons Component

A responsive Like/Reaction buttons component designed with microinteractions in mind, using a monochromatic color scheme, suitable for blog and content consumption, with support for dark themes.

Open