Skeuomorphic Like/Reaction Buttons コンポーネント

<div class="flex items-center justify-center bg-gray-200 dark:bg-gray-800 p-4">
  <div class="flex items-center space-x-4">
    <!-- Like Button -->
    <button class="flex items-center justify-center px-4 py-2 rounded-full bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 shadow-lg hover:shadow-xl transition duration-300 ease-in-out transform hover:-translate-y-1">
      <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
      <span>Like</span>
      <span class="ml-1 text-sm">(1.2k)</span>
    </button>

    <!-- Reaction Buttons Dropdown (Skeuomorphic Pop-up) -->
    <div class="relative group">
      <button class="flex items-center justify-center px-4 py-2 rounded-full bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 shadow-lg hover:shadow-xl focus:outline-none transition duration-300 ease-in-out transform hover:-translate-y-1">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
      </button>
      <div class="absolute bottom-full mb-2 left-1/2 transform -translate-x-1/2 w-64 p-4 rounded-xl shadow-2xl bg-gray-300 dark:bg-gray-700 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition duration-300 ease-in-out invisible group-hover:visible group-focus-within:visible scale-95 group-hover:scale-100 origin-bottom skeuomorphic-popup">
        <div class="grid grid-cols-4 gap-2">
          <!-- Sample Reactions (replace with actual icons/images) -->
          <button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
            <span class="text-2xl">👍</span>
          </button>
          <button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
            <span class="text-2xl">❤️</span>
          </button>
          <button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
            <span class="text-2xl">😂</span>
          </button>
          <button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
            <span class="text-2xl">😮</span>
          </button>
          <button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
            <span class="text-2xl">😢</span>
          </button>
          <button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
            <span class="text-2xl">😡</span>
          </button>
          </div>
      </div>
    </div>
  </div>
</div>

<style>
.skeuomorphic-popup {
  /* Basic Skeuomorphic effect using box-shadow for depth and highlights */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(255,255,255,0.5), 0 5px 15px rgba(0,0,0,0.3);
}

.dark .skeuomorphic-popup {
   box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), inset 0 -2px 4px rgba(70,70,70,0.3), 0 5px 15px rgba(0,0,0,0.5);
}
</style>