Glassmorphism Like/Reaction Buttons 组件

<div
  class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900"
>
  <div
    class="flex space-x-4 p-4 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 rounded-xl shadow-lg backdrop-filter backdrop-blur-lg border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20"
  >
    <!-- Like Button -->
    <button
      class="flex items-center space-x-2 px-4 py-2 bg-blue-500 bg-opacity-70 dark:bg-blue-700 dark:bg-opacity-70 text-white rounded-full transition-transform transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-5 w-5"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm3-1a1 1 0 100-2 1 1 0 000 2zm3 1a1 1 0 100-2 1 1 0 000 2zm-3 4a1 1 0 100-2 1 1 0 000 2z"
          clip-rule="evenodd"
        />
      </svg>
      <span class="font-semibold">Like</span>
    </button>

    <!-- Heart Reaction Button -->
    <button
      class="flex items-center space-x-2 px-4 py-2 bg-red-500 bg-opacity-70 dark:bg-red-700 dark:bg-opacity-70 text-white rounded-full transition-transform transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-75"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-5 w-5"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <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"
        />
      </svg>
      <span class="font-semibold">Love</span>
    </button>

    <!-- Laugh Reaction Button -->
    <button
      class="flex items-center space-x-2 px-4 py-2 bg-yellow-500 bg-opacity-70 dark:bg-yellow-700 dark:bg-opacity-70 text-white rounded-full transition-transform transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-75"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-5 w-5"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm3-1a1 1 0 100-2 1 1 0 000 2zm3 1a1 1 0 100-2 1 1 0 000 2zm-3 4a1 1 0 100-2 1 1 0 000 2z"
          clip-rule="evenodd"
        />
      </svg>
      <span class="font-semibold">Haha</span>
    </button>
  </div>
</div>