Аналогичные кнопки «Нравится» / «Реакция» в темном режиме

<div class="min-h-screen bg-gray-900 p-8 flex flex-col items-center justify-center dark:bg-gray-900">

  <h1 class="text-4xl font-bold text-white mb-8">Portfolio Showcase</h1>

  <div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-2xl w-full dark:bg-gray-800">
    
    <div class="flex items-center mb-6">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500 mr-4">
      <div>
        <p class="text-white text-lg font-semibold">John Doe</p>
        <p class="text-gray-400 text-sm">Web Developer - <span class="text-purple-400">@john.doe</span></p>
      </div>
    </div>

    <img src="https://picsum.photos/seed/portfolio-project/800/400" alt="Project Image" class="w-full h-64 object-cover rounded-md mb-6 border border-purple-600">
    
    <p class="text-gray-300 text-base mb-6">
      This is an example portfolio project showcasing a beautiful and responsive web design.
      It utilizes modern CSS practices and aims for an excellent user experience. The color scheme 
      is analogous, creating a harmonious and aesthetically pleasing look.
    </p>

    <div class="flex items-center justify-between text-gray-400 text-sm mb-6">
      <span>2 hours ago</span>
      <span>UX/UI Design, Front-end Development</span>
    </div>

    <div class="flex items-center space-x-6">
      
      <!-- Like Button -->
      <button class="flex items-center text-gray-400 hover:text-blue-400 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M9.71 18.29a.5.5 0 00.58 0c2.81-2.4 5.2-4.52 7.03-6.17a3.5 3.5 0 00.91-3.69c-.48-1.07-1.46-1.89-2.58-2.19-1.12-.3-2.31-.1-3.32.55-.57.36-1.12.79-1.63 1.25a.5.5 0 01-.7 0c-.51-.46-1.06-.89-1.63-1.25-1.01-.65-2.2-.85-3.32-.55-1.12.3-2.1.92-2.58 2.19a3.5 3.5 0 00.91 3.69c1.83 1.65 4.22 3.77 7.03 6.17z" clip-rule="evenodd"></path>
        </svg>
        <span class="font-semibold">Like</span>
        <span class="ml-1 text-sm">(1.2K)</span>
      </button>

      <!-- Comment Button -->
      <button class="flex items-center text-gray-400 hover:text-green-400 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M18 10c0 3.86-3.14 7-7 7a6.99 6.99 0 01-5.73-3.03l-2.28.85a.5.5 0 01-.62-.5V9.45a7 7 0 017.5-7.42A7 7 0 0118 10zm-5.73 3.03l2.28-.85a.5.5 0 01.62.5V10.55a6.5 6.5 0 00-7.39-7.1A6.5 6.5 0 004 10a6.5 6.5 0 006.5 6.5c2.47 0 4.67-1.39 5.77-3.47z" clip-rule="evenodd"></path>
        </svg>
        <span class="font-semibold">Comment</span>
        <span class="ml-1 text-sm">(245)</span>
      </button>

      <!-- Share Button with more complex hover -->
      <button class="flex items-center text-gray-400 hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-105 group">
        <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M7.707 11.293a1 1 0 010-1.414L10.586 7 7.707 4.121a1 1 0 011.414-1.414L12 5.586l2.879-2.879a1 1 0 111.414 1.414L13.414 7l2.879 2.879a1 1 0 01-1.414 1.414L12 8.414l-2.879 2.879a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          <path fill-rule="evenodd" d="M12 17a1 1 0 100-2H7a1 1 0 100 2h5z" clip-rule="evenodd"></path>
        </svg>
        <span class="font-semibold">Share</span>
        <span class="ml-1 text-sm">(50)</span>
        <div class="absolute left-1/2 -ml-16 mt-12 p-3 bg-gray-700 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 shadow-lg">
          Share via:
          <div class="flex mt-2 space-x-2">
            <button class="px-3 py-1 rounded-full bg-blue-600 hover:bg-blue-700 transition duration-200">Facebook</button>
            <button class="px-3 py-1 rounded-full bg-blue-400 hover:bg-blue-500 transition duration-200">Twitter</button>
          </div>
        </div>
      </button>
    </div>

    <!-- Reaction Buttons (more complex) -->
    <div class="mt-8 pt-6 border-t border-gray-700 flex flex-wrap items-center justify-around">
      
      <button class="flex flex-col items-center text-gray-400 hover:text-yellow-400 transition duration-300 ease-in-out transform hover:scale-110 p-2 rounded-lg">
        <span class="text-3xl">👍</span>
        <span class="text-sm mt-1">Like</span>
        <span class="text-xs">(800)</span>
      </button>

      <button class="flex flex-col items-center text-gray-400 hover:text-red-400 transition duration-300 ease-in-out transform hover:scale-110 p-2 rounded-lg">
        <span class="text-3xl">❤️</span>
        <span class="text-sm mt-1">Love</span>
        <span class="text-xs">(300)</span>
      </button>

      <button class="flex flex-col items-center text-gray-400 hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-110 p-2 rounded-lg">
        <span class="text-3xl">😆</span>
        <span class="text-sm mt-1">Haha</span>
        <span class="text-xs">(150)</span>
      </button>

      <button class="flex flex-col items-center text-gray-400 hover:text-blue-500 transition duration-300 ease-in-out transform hover:scale-110 p-2 rounded-lg">
        <span class="text-3xl">😮</span>
        <span class="text-sm mt-1">Wow</span>
        <span class="text-xs">(90)</span>
      </button>

      <button class="flex flex-col items-center text-gray-400 hover:text-orange-400 transition duration-300 ease-in-out transform hover:scale-110 p-2 rounded-lg">
        <span class="text-3xl">😢</span>
        <span class="text-sm mt-1">Sad</span>
        <span class="text-xs">(40)</span>
      </button>

      <button class="flex flex-col items-center text-gray-400 hover:text-teal-400 transition duration-300 ease-in-out transform hover:scale-110 p-2 rounded-lg">
        <span class="text-3xl">😡</span>
        <span class="text-sm mt-1">Angry</span>
        <span class="text-xs">(20)</span>
      </button>

    </div>

  </div>
</div>