User Mentions Component

<div class="p-4 sm:p-6 md:p-8 lg:p-10 bg-gradient-to-br from-orange-100 to-amber-200 dark:from-gray-900 dark:to-gray-800 min-h-screen font-sans">

  <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">

    <!-- User Mention Card 1 -->
    <div class="relative bg-white dark:bg-gray-700 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 group p-6 sm:p-8 overflow-hidden
                before:absolute before:inset-0 before:bg-gradient-to-br before:from-orange-500 before:to-red-700 before:opacity-0 group-hover:before:opacity-20 before:rounded-3xl before:transition-opacity before:duration-300
                after:absolute after:inset-0 after:rounded-3xl after:ring-4 after:ring-orange-400 dark:after:ring-gray-600 after:ring-opacity-0 group-hover:after:ring-opacity-50 after:transition-all after:duration-300 z-10">

      <div class="relative z-20 flex flex-col items-center text-center">

        <div class="relative mb-4">
          <img class="w-24 h-24 sm:w-28 sm:h-28 rounded-full object-cover border-4 border-amber-400 dark:border-gray-500 shadow-md" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
          <span class="absolute bottom-1 right-1 block w-5 h-5 bg-green-500 border-2 border-white dark:border-gray-700 rounded-full animate-pulse"></span>
        </div>

        <h3 class="text-2xl sm:text-3xl font-extrabold text-orange-800 dark:text-orange-300 mb-1 leading-tight">Chloe Dubois</h3>
        <p class="text-md sm:text-lg text-amber-700 dark:text-amber-400 mb-4 font-semibold">Fashion Influencer</p>

        <div class="flex items-center space-x-2 text-amber-900 dark:text-amber-200 mb-5">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
          </svg>
          <span class="text-lg sm:text-xl font-bold">56 Mentions</span>
        </div>

        <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base mb-6 line-clamp-3">"Chloe's latest collection lookbook is absolutely stunning! The autumn palette is inspiring."</p>

        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border-2 border-orange-600 dark:border-orange-400 rounded-full text-base font-semibold text-orange-800 dark:text-orange-100 bg-orange-200 dark:bg-orange-700 hover:bg-orange-300 dark:hover:bg-orange-600 transition-all duration-300 transform hover:scale-105 shadow-md hover:shadow-lg">
          View Profile
          <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
        </a>
      </div>
    </div>

    <!-- User Mention Card 2 -->
    <div class="relative bg-white dark:bg-gray-700 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 group p-6 sm:p-8 overflow-hidden
                before:absolute before:inset-0 before:bg-gradient-to-br before:from-red-600 before:to-purple-800 before:opacity-0 group-hover:before:opacity-20 before:rounded-3xl before:transition-opacity before:duration-300
                after:absolute after:inset-0 after:rounded-3xl after:ring-4 after:ring-red-500 dark:after:ring-gray-600 after:ring-opacity-0 group-hover:after:ring-opacity-50 after:transition-all after:duration-300 z-10">

      <div class="relative z-20 flex flex-col items-center text-center">

        <div class="relative mb-4">
          <img class="w-24 h-24 sm:w-28 sm:h-28 rounded-full object-cover border-4 border-red-400 dark:border-gray-500 shadow-md" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
          <span class="absolute bottom-1 right-1 block w-5 h-5 bg-green-500 border-2 border-white dark:border-gray-700 rounded-full animate-pulse"></span>
        </div>

        <h3 class="text-2xl sm:text-3xl font-extrabold text-red-800 dark:text-red-300 mb-1 leading-tight">Liam Harris</h3>
        <p class="text-md sm:text-lg text-red-700 dark:text-red-400 mb-4 font-semibold">Beauty Vlogger</p>

        <div class="flex items-center space-x-2 text-red-900 dark:text-red-200 mb-5">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
          </svg>
          <span class="text-lg sm:text-xl font-bold">41 Mentions</span>
        </div>

        <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base mb-6 line-clamp-3">"Liam's review of the new fall lipstick shades was so insightful. Must-see for beauty enthusiasts."</p>

        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border-2 border-red-600 dark:border-red-400 rounded-full text-base font-semibold text-red-800 dark:text-red-100 bg-red-200 dark:bg-red-700 hover:bg-red-300 dark:hover:bg-red-600 transition-all duration-300 transform hover:scale-105 shadow-md hover:shadow-lg">
          View Profile
          <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
        </a>
      </div>
    </div>

    <!-- User Mention Card 3 -->
    <div class="relative bg-white dark:bg-gray-700 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 group p-6 sm:p-8 overflow-hidden
                before:absolute before:inset-0 before:bg-gradient-to-br before:from-yellow-500 before:to-orange-700 before:opacity-0 group-hover:before:opacity-20 before:rounded-3xl before:transition-opacity before:duration-300
                after:absolute after:inset-0 after:rounded-3xl after:ring-4 after:ring-amber-500 dark:after:ring-gray-600 after:ring-opacity-0 group-hover:after:ring-opacity-50 after:transition-all after:duration-300 z-10">

      <div class="relative z-20 flex flex-col items-center text-center">

        <div class="relative mb-4">
          <img class="w-24 h-24 sm:w-28 sm:h-28 rounded-full object-cover border-4 border-amber-400 dark:border-gray-500 shadow-md" src="https://randomuser.me/api/portraits/women/3.jpg" alt="User Avatar">
          <span class="absolute bottom-1 right-1 block w-5 h-5 bg-green-500 border-2 border-white dark:border-gray-700 rounded-full animate-pulse"></span>
        </div>

        <h3 class="text-2xl sm:text-3xl font-extrabold text-orange-800 dark:text-orange-300 mb-1 leading-tight">Isabella Rossi</h3>
        <p class="text-md sm:text-lg text-amber-700 dark:text-amber-400 mb-4 font-semibold">Stylist & Designer</p>

        <div class="flex items-center space-x-2 text-amber-900 dark:text-amber-200 mb-5">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
          </svg>
          <span class="text-lg sm:text-xl font-bold">38 Mentions</span>
        </div>

        <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base mb-6 line-clamp-3">"Isabella's insights on seasonal fashion trends are always on point. A true style guru!"</p>

        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border-2 border-amber-600 dark:border-amber-400 rounded-full text-base font-semibold text-amber-800 dark:text-amber-100 bg-amber-200 dark:bg-amber-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 shadow-md hover:shadow-lg">
          View Profile
          <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
        </a>
      </div>
    </div>

  </div>
</div>