User Mentions 组件

<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-blue-950 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm mx-auto p-6 rounded-xl shadow-2xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 border border-blue-200 dark:bg-gray-800 dark:bg-opacity-30 dark:border-blue-700 transform transition-all duration-300 hover:scale-105">
    <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-6 text-center tracking-wide">
      Recent Mentions
    </h3>
    <div class="space-y-4">
      <!-- Mention Item 1 -->
      <div class="flex items-center space-x-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-40 p-3 rounded-lg shadow-md transition-all duration-200 hover:bg-opacity-40 dark:hover:bg-opacity-50">
        <img class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-blue-900 dark:text-blue-100 font-medium text-sm sm:text-base">@john_doe <span class="text-xs text-blue-700 dark:text-blue-300 ml-1">1h ago</span></p>
          <p class="text-blue-700 dark:text-blue-300 text-sm overflow-hidden text-ellipsis whitespace-nowrap">Mentioned you in a report update.</p>
        </div>
      </div>

      <!-- Mention Item 2 -->
      <div class="flex items-center space-x-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-40 p-3 rounded-lg shadow-md transition-all duration-200 hover:bg-opacity-40 dark:hover:bg-opacity-50">
        <img class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-blue-900 dark:text-blue-100 font-medium text-sm sm:text-base">@jane_smith <span class="text-xs text-blue-700 dark:text-blue-300 ml-1">3h ago</span></p>
          <p class="text-blue-700 dark:text-blue-300 text-sm overflow-hidden text-ellipsis whitespace-nowrap">Asked for your feedback on the new design.</p>
        </div>
      </div>

      <!-- Mention Item 3 -->
      <div class="flex items-center space-x-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-40 p-3 rounded-lg shadow-md transition-all duration-200 hover:bg-opacity-40 dark:hover:bg-opacity-50">
        <img class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-500" src="https://randomuser.me/api/portraits/men/8.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-blue-900 dark:text-blue-100 font-medium text-sm sm:text-base">@alex_williams <span class="text-xs text-blue-700 dark:text-blue-300 ml-1">Yesterday</span></p>
          <p class="text-blue-700 dark:text-blue-300 text-sm overflow-hidden text-ellipsis whitespace-nowrap">Shared a useful resource in the team chat.</p>
        </div>
      </div>
    </div>
    <button class="mt-8 w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-lg transform transition-all duration-300 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
      View All Mentions
    </button>
  </div>
</div>