Componente de menciones de usuario

<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 dark:from-gray-900 dark:via-purple-950 dark:to-pink-950 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border-t-4 border-indigo-600 dark:border-indigo-500">
    <div class="p-4 sm:p-6 pb-2 sm:pb-2 md:p-8 md:pb-4 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl md:text-3xl lg:text-3xl font-extrabold text-gray-900 dark:text-white mb-1 sm:mb-2 leading-tight tracking-tight">
        Mentions
      </h2>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 font-medium">
        People talking about you.
      </p>
    </div>

    <div class="divide-y divide-gray-200 dark:divide-gray-700">

      <!-- Mention Item 1 -->
      <div class="p-4 sm:p-6 flex items-start space-x-3 sm:space-x-4">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-indigo-500 dark:ring-indigo-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex items-center justify-between mb-0.5">
            <p class="text-sm sm:text-base font-semibold text-gray-900 dark:text-white">
              John Doe
              <span class="text-xs text-indigo-600 dark:text-indigo-400 font-medium ml-1">@johndoe</span>
            </p>
            <span class="text-xs text-gray-500 dark:text-gray-400">2h ago</span>
          </div>
          <p class="text-sm text-gray-700 dark:text-gray-300 leading-tight">
            "This project's design is <span class="font-semibold text-indigo-700 dark:text-indigo-300">outstanding</span>! Really impressed by the attention to detail."
          </p>
        </div>
      </div>

      <!-- Mention Item 2 -->
      <div class="p-4 sm:p-6 flex items-start space-x-3 sm:space-x-4">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-purple-500 dark:ring-purple-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex items-center justify-between mb-0.5">
            <p class="text-sm sm:text-base font-semibold text-gray-900 dark:text-white">
              Jane Smith
              <span class="text-xs text-purple-600 dark:text-purple-400 font-medium ml-1">@janesmithy</span>
            </p>
            <span class="text-xs text-gray-500 dark:text-gray-400">5h ago</span>
          </div>
          <p class="text-sm text-gray-700 dark:text-gray-300 leading-tight">
            "Just saw the new <span class="font-semibold text-purple-700 dark:text-purple-300">case study</span>, incredibly insightful. Great work!"
          </p>
        </div>
      </div>

      <!-- Mention Item 3 -->
      <div class="p-4 sm:p-6 flex items-start space-x-3 sm:space-x-4">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-pink-500 dark:ring-pink-400" src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex items-center justify-between mb-0.5">
            <p class="text-sm sm:text-base font-semibold text-gray-900 dark:text-white">
              Michael B.
              <span class="text-xs text-pink-600 dark:text-pink-400 font-medium ml-1">@mikeyb_design</span>
            </p>
            <span class="text-xs text-gray-500 dark:text-gray-400">1d ago</span>
          </div>
          <p class="text-sm text-gray-700 dark:text-gray-300 leading-tight">
            "Their portfolio sets a new standard. The <span class="font-semibold text-pink-700 dark:text-pink-300">UX flow</span> is seamless and intuitive."
          </p>
        </div>
      </div>

    </div>

    <div class="p-4 sm:p-6 pt-2 sm:pt-2 md:p-8 md:pt-4 text-center">
      <a href="#" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-md text-indigo-700 dark:text-indigo-200 bg-indigo-100 dark:bg-indigo-700 hover:bg-indigo-200 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
        View All Mentions
        <svg class="ml-2 -mr-0.5 w-4 h-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>

  </div>
</div>