Like/Reaction Buttons 컴포넌트

<div class="flex flex-col items-center justify-center p-4 sm:p-6 md:p-8 bg-gradient-to-br from-purple-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 font-sans">

  <div class="flex flex-wrap items-center justify-center gap-3 sm:gap-4 p-3 sm:p-5 md:p-6 rounded-2xl shadow-xl bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm border border-fuchsia-100 dark:border-gray-700 max-w-xl mx-auto">

    <!-- Heart Button -->
    <button class="flex items-center gap-2 px-4 py-2 rounded-full transition-all duration-300 ease-in-out
                   text-red-600 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-white
                   dark:text-red-400 dark:bg-red-900 dark:bg-opacity-30 dark:hover:bg-red-900 dark:focus:ring-red-400 dark:focus:ring-offset-gray-800">
      <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
      </svg>
      <span class="text-sm font-semibold hidden sm:inline">Liked</span>
      <span class="text-sm font-semibold">1.2K</span>
    </button>

    <!-- Fire Button -->
    <button class="flex items-center gap-2 px-4 py-2 rounded-full transition-all duration-300 ease-in-out
                   text-orange-600 bg-orange-50 hover:bg-orange-100 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-white
                   dark:text-orange-400 dark:bg-orange-900 dark:bg-opacity-30 dark:hover:bg-orange-900 dark:focus:ring-orange-400 dark:focus:ring-offset-gray-800">
      <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 2.69C10.74 1.76 9.07 1 7.5 1 4.42 1 2 3.42 2 6.5c0 2.21 1.25 4.14 3.12 5.17C7.45 13.9 12 18.5 12 18.5s4.55-4.6 6.88-6.83C20.75 10.64 22 8.71 22 6.5c0-3.08-2.42-5.5-5.5-5.5-1.57 0-3.24.76-4.5 1.76zM13.43 14L12 17.5l-1.43-3.5L7 11.5l3.5-1.43L12 7l1.43 3.07L17 11.5l-3.57 2.5z"/>
      </svg>
      <span class="text-sm font-semibold hidden sm:inline">Fiery</span>
      <span class="text-sm font-semibold">543</span>
    </button>

    <!-- Clap Button -->
    <button class="flex items-center gap-2 px-4 py-2 rounded-full transition-all duration-300 ease-in-out
                   text-teal-600 bg-teal-50 hover:bg-teal-100 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 focus:ring-offset-white
                   dark:text-teal-400 dark:bg-teal-900 dark:bg-opacity-30 dark:hover:bg-teal-900 dark:focus:ring-teal-400 dark:focus:ring-offset-gray-800">
      <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M18 10h-4V4h-4v6H6l6 6 6-6zM4 20h16v2H4z"/>
      </svg>
      <span class="text-sm font-semibold hidden sm:inline">Clap</span>
      <span class="text-sm font-semibold">891</span>
    </button>

    <!-- Headphone Button -->
    <button class="flex items-center gap-2 px-4 py-2 rounded-full transition-all duration-300 ease-in-out
                   text-blue-600 bg-blue-50 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white
                   dark:text-blue-400 dark:bg-blue-900 dark:bg-opacity-30 dark:hover:bg-blue-900 dark:focus:ring-blue-400 dark:focus:ring-offset-gray-800">
      <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 1A7 7 0 005 8v6a7 7 0 0014 0V8a7 7 0 00-7-7zm0 2a5 5 0 015 5v6a5 5 0 01-10 0V8a5 5 0 015-5zm-5 8h-2v3h2v-3zm10 0h-2v3h2v-3zm-5 5a2 2 0 110 4 2 2 0 010-4z"/>
      </svg>
      <span class="text-sm font-semibold hidden sm:inline">Vibe</span>
      <span class="text-sm font-semibold">300</span>
    </button>

    <!-- Share Button -->
    <button class="flex items-center gap-2 px-4 py-2 rounded-full transition-all duration-300 ease-in-out
                   text-purple-600 bg-purple-50 hover:bg-purple-100 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white
                   dark:text-purple-400 dark:bg-purple-900 dark:bg-opacity-30 dark:hover:bg-purple-900 dark:focus:ring-purple-400 dark:focus:ring-offset-gray-800">
      <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.52.48 1.2.77 1.96.77 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L6.04 9.11c-.52-.48-1.2-.77-1.96-.77-1.66 0-3 1.34-3 3s1.34 3 3 3c.76 0 1.44-.3 1.96-.77l7.05 4.11c-.05.23-.09.46-.09.7 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z"/>
      </svg>
      <span class="text-sm font-semibold hidden sm:inline">Share</span>
    </button>

  </div>

</div>