Like/Reaction Buttons コンポーネント

<div class="flex flex-col items-center justify-center p-8 bg-gray-900 dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-md bg-opacity-30">
  <div class="flex items-center space-x-4 mb-6">
    <img src="https://picsum.photos/50/50" alt="User Avatar" class="w-12 h-12 rounded-full border border-white">
    <span class="text-white text-lg font-semibold">Your Name</span>
  </div>

  <span class="text-white text-sm mb-4">How do you feel about this?</span>

  <div class="flex space-x-4">
    <button class="p-4 rounded-lg bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 transition-all duration-300 text-white shadow-lg dark:bg-gradient-to-r dark:from-blue-700 dark:to-purple-800 dark:hover:from-blue-800 dark:hover:to-purple-900">
      Like
    </button>
    <button class="p-4 rounded-lg bg-gradient-to-r from-yellow-400 to-orange-500 hover:from-yellow-500 hover:to-orange-600 transition-all duration-300 text-white shadow-lg dark:bg-gradient-to-r dark:from-yellow-500 dark:to-orange-600 dark:hover:from-yellow-600 dark:hover:to-orange-700">
      Love
    </button>
    <button class="p-4 rounded-lg bg-gradient-to-r from-red-400 to-pink-500 hover:from-red-500 hover:to-pink-600 transition-all duration-300 text-white shadow-lg dark:bg-gradient-to-r dark:from-red-500 dark:to-pink-600 dark:hover:from-red-600 dark:hover:to-pink-700">
      Angry
    </button>
  </div>

  <div class="mt-6 flex items-center space-x-2">
    <span class="text-white">Total Reactions:</span>
    <span class="text-white font-bold">123</span>
  </div>
</div>