User Mentions 组件

<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-purple-200 to-pink-200 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">

  <div class="relative w-full max-w-md mx-auto group perspective-1000px">
    <div class="relative preserve-3d transition-transform duration-700 ease-in-out group-hover:rotate-x-3 rotate-y-3">

      <div class="relative z-10 w-full p-4 sm:p-5 md:p-6 rounded-3xl backdrop-blur-md bg-white/30 dark:bg-gray-700/30 shadow-2xl overflow-hidden
                  border border-white/50 dark:border-gray-600/50
                  transform transition-all duration-300 ease-in-out
                  hover:scale-[1.02] hover:shadow-cyan-500/50 dark:hover:shadow-purple-500/50">

        <!-- Glassmorphism Overlay Effect -->
        <div class="absolute inset-0 z-0 pointer-events-none
                    bg-gradient-to-br from-white/40 to-white/10 dark:from-gray-800/40 dark:to-gray-900/10
                    rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

        <h2 class="relative z-10 text-xl sm:text-2xl font-extrabold text-purple-800 dark:text-pink-400 mb-4 tracking-tight">
          Recent Mentions
        </h2>

        <div class="relative z-10 space-y-3">

          <!-- Mention Item 1 -->
          <div class="relative p-3 rounded-xl bg-white/40 dark:bg-gray-800/40 backdrop-blur-sm
                      flex items-center space-x-3 transition-transform transform hover:scale-[1.01] duration-200
                      group/item border border-white/60 dark:border-gray-700/60
                      hover:shadow-lg hover:shadow-purple-300/40 dark:hover:shadow-pink-700/30">
            <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-purple-500 dark:ring-pink-400 object-cover transform transition-transform duration-300 group-hover/item:scale-105"
                 src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar">
            <div class="flex-1">
              <p class="font-semibold text-purple-900 dark:text-white text-sm sm:text-base leading-tight">
                @<span class="text-blue-700 dark:text-cyan-400">user_galore</span> mentioned you in a post
              </p>
              <p class="text-gray-700 dark:text-gray-300 text-xs sm:text-sm mt-1 line-clamp-1">
                "Great insights on the new #webdev framework! Thanks for sharing..."
              </p>
              <span class="text-xs text-gray-500 dark:text-gray-400 block mt-1">2 hours ago</span>
            </div>
          </div>

          <!-- Mention Item 2 -->
          <div class="relative p-3 rounded-xl bg-white/40 dark:bg-gray-800/40 backdrop-blur-sm
                      flex items-center space-x-3 transition-transform transform hover:scale-[1.01] duration-200
                      group/item border border-white/60 dark:border-gray-700/60
                      hover:shadow-lg hover:shadow-cyan-300/40 dark:hover:shadow-indigo-700/30">
            <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-pink-500 dark:ring-cyan-400 object-cover transform transition-transform duration-300 group-hover/item:scale-105"
                 src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div class="flex-1">
              <p class="font-semibold text-purple-900 dark:text-white text-sm sm:text-base leading-tight">
                @<span class="text-blue-700 dark:text-cyan-400">dev_wizard</span> replied to your comment
              </p>
              <p class="text-gray-700 dark:text-gray-300 text-xs sm:text-sm mt-1 line-clamp-1">
                "That's a valid point, I agree with your assessment. Looking forward to..."
              </p>
              <span class="text-xs text-gray-500 dark:text-gray-400 block mt-1">5 hours ago</span>
            </div>
          </div>

          <!-- Mention Item 3 -->
          <div class="relative p-3 rounded-xl bg-white/40 dark:bg-gray-800/40 backdrop-blur-sm
                      flex items-center space-x-3 transition-transform transform hover:scale-[1.01] duration-200
                      group/item border border-white/60 dark:border-gray-700/60
                      hover:shadow-lg hover:shadow-green-300/40 dark:hover:shadow-teal-700/30">
            <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-lime-500 dark:ring-green-400 object-cover transform transition-transform duration-300 group-hover/item:scale-105"
                 src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">
            <div class="flex-1">
              <p class="font-semibold text-purple-900 dark:text-white text-sm sm:text-base leading-tight">
                @<span class="text-blue-700 dark:text-cyan-400">code_ninja</span> included you in a photo
              </p>
              <p class="text-gray-700 dark:text-gray-300 text-xs sm:text-sm mt-1 line-clamp-1">
                "Team selfie from the hackathon! Good job everyone, especially..."
              </p>
              <span class="text-xs text-gray-500 dark:text-gray-400 block mt-1">1 day ago</span>
            </div>
          </div>

        </div>

        <button class="relative z-10 w-full mt-6 py-3 px-4 rounded-xl
                       bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-700
                       text-white font-bold text-base sm:text-lg
                       transition-all duration-300 ease-in-out
                       shadow-lg hover:shadow-xl hover:shadow-purple-400/50 dark:hover:shadow-pink-800/50
                       transform hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-300 dark:focus:ring-pink-600">
          View All Mentions
        </button>

      </div>

      <!-- Background Glow/Aura (for Glassmorphism depth) -->
      <div class="absolute -inset-1 sm:-inset-2 md:-inset-3 rounded-3xl bg-gradient-to-br from-pink-400 to-cyan-400 dark:from-purple-600 dark:to-red-600
                  filter blur-3xl opacity-70 dark:opacity-60 mix-blend-multiply
                  transform translate-z-[-20px] scale-95 transition-all duration-500 ease-in-out
                  group-hover:opacity-100 group-hover:scale-100 group-hover:blur-4xl"></div>

    </div>
  </div>

</div>

<style>
  /* Adding custom styles for 3D effect in Tailwind CSS */
  .perspective-1000px {
    perspective: 1000px;
  }

  .preserve-3d {
    transform-style: preserve-3d;
  }

  .rotate-y-3 {
    transform: rotateY(3deg);
  }

  .group-hover\:rotate-x-3:hover {
    transform: rotateX(3deg) scaleZ(1.02);
  }

  .group-hover\:rotate-y-3:hover {
    transform: rotateY(3deg);
  }

  .translate-z-\[-20px\] {
    transform: translateZ(-20px);
  }

  .backdrop-blur-md {
    backdrop-filter: blur(12px);
  }

  @media (min-width: 640px) {
    .backdrop-blur-md {
      backdrop-filter: blur(16px);
    }
  }

  @media (min-width: 768px) {
    .backdrop-blur-md {
      backdrop-filter: blur(20px);
    }
  }

  .blur-4xl {
    filter: blur(64px);
  }
</style>