Componente Pulsanti Mi piace/Reazione

<div class="flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4 min-h-screen">
  <div class="flex space-x-2">
    <!-- Primary Like Button -->
    <button class="flex items-center space-x-1 px-4 py-2 rounded-full bg-blue-500 text-white hover:bg-blue-600 transform transition-transform duration-200 hover:scale-105 focus:outline-none dark:bg-blue-700 dark:hover:bg-blue-800">
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.667a2 2 0 002 2h2.983a2 2 0 001.828-1.154l3.913-7K11 2.167v1.833A2.5 2.5 0 008.5 6H5a2 2 0 00-2 2v2.333L6 10.333z"></path>
      </svg>
      <span>Like</span>
      <span class="text-sm">123</span>
    </button>


    <!-- Reaction Buttons - Example using emojis -->
    <div class="relative group">
      <button class="flex items-center space-x-1 px-4 py-2 rounded-full bg-green-500 text-white hover:bg-green-600 transform transition-transform duration-200 hover:scale-105 focus:outline-none dark:bg-green-700 dark:hover:bg-green-800">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-smile">
          <circle cx="12" cy="12" r="10"></circle>
          <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
          <line x1="9" y1="9" x2="9.01" y2="9"></line>
          <line x1="15" y1="9" x2="15.01" y2="9"></line>
        </svg>
        <span>React</span>
      </button>
      

      <!-- Reaction Options (Hidden by default, shown on hover) -->
      <div class="absolute bottom-full mb-2 left-1/2 transform -translate-x-1/2 flex space-x-1 bg-white dark:bg-gray-800 p-2 rounded-full shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10">
        <button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">👍</button>
        <button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">❤️</button>
        <button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">😆</button>
        <button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">😮</button>
        <button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">😢</button>
        <button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">😡</button>
      </div>
    </div>

  </div>
</div>