搜索组件

类别

组件用户提及

用户提及

提及或标记其他用户的功能

User Mentions 组件

一个简单、响应迅速的用户提及组件，具有充满活力的 glassmorphism 风格，适用于社交媒体应用程序。包括深色模式支持。

                <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>

User Mentions 组件

响应式 User Mentions 组件，具有 Glassmorphism 设计、互补配色方案和深色模式支持，适用于商业网站。

打开预览

                <div class="min-h-screen bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 p-8 flex items-center justify-center">
  <div class="backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-30 rounded-xl p-6 w-full max-w-sm border border-white border-opacity-30 dark:border-gray-700 shadow-lg">
    <h3 class="text-xl font-semibold text-white dark:text-gray-100 mb-4 text-center">User Mentions</h3>
    <div class="space-y-4">
      
      <div class="flex items-center bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-3 shadow-md border border-white border-opacity-20 dark:border-gray-600">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-white dark:border-gray-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div>
          <p class="font-medium text-white dark:text-gray-100">John Doe <span class="text-sm text-gray-100 dark:text-gray-300">(CEO)</span></p>
          <p class="text-sm text-gray-50 dark:text-gray-400">Mentioned you in a project update.</p>
        </div>
      </div>

      <div class="flex items-center bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-3 shadow-md border border-white border-opacity-20 dark:border-gray-600">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-white dark:border-gray-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div>
          <p class="font-medium text-white dark:text-gray-100">Jane Smith <span class="text-sm text-gray-100 dark:text-gray-300">(Designer)</span></p>
          <p class="text-sm text-gray-50 dark:text-gray-400">Asked your opinion on a new design.</p>
        </div>
      </div>

      <div class="flex items-center bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-3 shadow-md border border-white border-opacity-20 dark:border-gray-600">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-white dark:border-gray-400" src="https://randomuser.me/api/portraits/men/18.jpg" alt="User Avatar">
        <div>
          <p class="font-medium text-white dark:text-gray-100">Robert Brown <span class="text-sm text-gray-100 dark:text-gray-300">(Developer)</span></p>
          <p class="text-sm text-gray-50 dark:text-gray-400">Assigned you a task in Jira.</p>
        </div>
      </div>

    </div>
  </div>
</div>

User Mentions 组件

用户提到了仪表板的组件，该组件使用 Tailwind CSS，具有单色配色方案、简单布局、响应式设计和深色主题支持。

打开预览

                <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
  <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">User Mentions</h3>
  <div class="space-y-3">
    <div class="flex items-center justify-between p-2 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
      <div class="flex items-center space-x-3">
        <img class="w-8 h-8 rounded-full" src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <p class="text-sm text-gray-700 dark:text-gray-300">@john_doe mentioned you in <span class="font-medium text-blue-500">#project-alpha</span></p>
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">2m ago</span>
    </div>

    <div class="flex items-center justify-between p-2 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
      <div class="flex items-center space-x-3">
        <img class="w-8 h-8 rounded-full" src="https://www.randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
        <p class="text-sm text-gray-700 dark:text-gray-300">@jane_smith replied to your comment in <span class="font-medium text-blue-500">#design-feedback</span></p>
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">1h ago</span>
    </div>

    <div class="flex items-center justify-between p-2 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
      <div class="flex items-center space-x-3">
        <img class="w-8 h-8 rounded-full" src="https://www.randomuser.me/api/portraits/men/78.jpg" alt="Avatar">
        <p class="text-sm text-gray-700 dark:text-gray-300">@peter_jones invited you to <span class="font-medium text-blue-500">#new-feature</span></p>
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">5h ago</span>
    </div>
  </div>
  <button class="mt-4 w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition-colors duration-200">
    View All Mentions
  </button>
</div>

User Mentions 组件

响应式 User Mentions 组件，采用 Retro/Vintage 风格和类似的配色方案设计，支持深色模式。它具有适用于社交媒体界面的用户头像、名称和消息文本。

打开预览

                <div class="p-4 bg-gradient-to-r from-yellow-400 to-pink-500 dark:from-yellow-600 dark:to-pink-700 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-xl font-bold text-white mb-4">User Mentions</h2>
    <div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md">
        <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex flex-col">
            <span class="text-black dark:text-white font-semibold">John Doe</span>
            <p class="text-gray-700 dark:text-gray-400">Mentioned you in a post</p>
        </div>
    </div>
    <div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md mt-3">
        <img src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex flex-col">
            <span class="text-black dark:text-white font-semibold">Jane Smith</span>
            <p class="text-gray-700 dark:text-gray-400">Commented on your photo</p>
        </div>
    </div>
    <div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md mt-3">
        <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex flex-col">
            <span class="text-black dark:text-white font-semibold">Michael Brown</span>
            <p class="text-gray-700 dark:text-gray-400">Started following you</p>
        </div>
    </div>
</div>

User Mentions 组件

一个简单的 User Mentions 组件，采用粗野主义风格设计，具有灰度配色方案，适用于商业和企业网站。它包括带有头像的用户提及，并且响应深色主题支持。

打开预览

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-2xl font-bold text-black dark:text-white">User Mentions</h2>
  <ul class="mt-4 space-y-4">
    <li class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full">
      <p class="text-gray-800 dark:text-gray-200">@john_doe</p>
    </li>
    <li class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full">
      <p class="text-gray-800 dark:text-gray-200">@jane_smith</p>
    </li>
    <li class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full">
      <p class="text-gray-800 dark:text-gray-200">@mark_twain</p>
    </li>
  </ul>
  <button class="mt-4 px-4 py-2 bg-gray-800 dark:bg-white text-white dark:text-gray-800 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none">See More Mentions</button>
</div>

User Mentions 组件

一个简单而极简的用户提到了组件，它支持深色模式。可点击的用户头像和名称显示在 Flexbox 布局中。该组件响应迅速，可适应不同的屏幕大小。

打开预览

                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
  <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Mentioned Users</h3>
  <div class="flex flex-wrap gap-4">
    <div class="flex items-center space-x-2">
      <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">John Doe</a>
    </div>
    <div class="flex items-center space-x-2">
      <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Jane Smith</a>
    </div>
    <div class="flex items-center space-x-2">
      <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Peter Jones</a>
    </div>
  </div>
</div>

用户提及组件

User Mentions 具有 Glassmorphism 风格、柔和配色方案和复杂电子商务复杂程度的组件，具有响应式设计和深色主题支持，使用 Tailwind CSS。

打开预览

                <div class="container mx-auto p-6">
  <div class="glassmorphism-container rounded-lg shadow-xl p-6">
    <h2 class="text-2xl font-bold mb-6">User Mentions</h2>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- User Mention Card 1 -->
      <div class="glassmorphism-card p-4 rounded-lg mb-4">
        <div class="flex items-center">
          <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div>
            <h3 class="text-xl font-semibold">John Doe</h3>
            <p class="text-sm opacity-75">@johndoe</p>
          </div>
        </div>
        <p class="mt-4 text-sm">"This product is amazing! Highly recommend it."</p>
        <div class="flex justify-end mt-4">
          <button class="glassmorphism-button py-2 px-4 rounded-lg text-sm">View Profile</button>
        </div>
      </div>

      <!-- User Mention Card 2 -->
      <div class="glassmorphism-card p-4 rounded-lg mb-4">
        <div class="flex items-center">
          <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div>
            <h3 class="text-xl font-semibold">Jane Smith</h3>
            <p class="text-sm opacity-75">@janesmith</p>
          </div>
        </div>
        <p class="mt-4 text-sm">"Fast shipping and great customer service."</p>
        <div class="flex justify-end mt-4">
          <button class="glassmorphism-button py-2 px-4 rounded-lg text-sm">View Profile</button>
        </div>
      </div>

      <!-- More User Mention Cards (add as needed) -->

    </div>
  </div>
</div>

<style>
/* Glassmorphism Styles */
.glassmorphism-container {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.dark .glassmorphism-container {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.glassmorphism-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.dark .glassmorphism-card {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.glassmorphism-button {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  transition: background-color 0.3s ease;
}

.dark .glassmorphism-button {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(0, 0, 0, 0.7);
}

.glassmorphism-button:hover {
  background: rgba(255, 255, 255, 0.8);
}

.dark .glassmorphism-button:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Pastel Colors (adjust as needed with Tailwind classes) */
/* Example: Use classes like text-pink-300, bg-blue-100, etc. */

/* Dark Mode */
.dark body {
  background-color: #1a202c;
  color: #e2e8f0;
}

.dark .text-xl,
.dark .text-sm,
.dark .opacity-75 {
  color: #e2e8f0;
}
</style>

用户提及组件

响应式 User Mentions 组件，具有 Glassmorphism 设计、类似配色方案和深色主题支持。

打开预览

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-6">  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-xl p-6 shadow-xl backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 border border-gray-200 dark:border-gray-700">    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">User Mentions</h2>    <div class="space-y-4">      <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md backdrop-filter backdrop-blur-sm bg-opacity-30 dark:bg-opacity-30 border border-gray-100 dark:border-gray-600">        <div class="flex items-center">          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">          <span class="text-gray-700 dark:text-gray-200 font-semibold">@johndoe</span>        </div>        <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-700">Mention</button>      </div>      <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md backdrop-filter backdrop-blur-sm bg-opacity-30 dark:bg-opacity-30 border border-gray-100 dark:border-gray-600">        <div class="flex items-center">          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">          <span class="text-gray-700 dark:text-gray-200 font-semibold">@janedoe</span>        </div>        <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-700">Mention</button>      </div>      <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md backdrop-filter backdrop-blur-sm bg-opacity-30 dark:bg-opacity-30 border border-gray-100 dark:border-gray-600">        <div class="flex items-center">          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">          <span class="text-gray-700 dark:text-gray-200 font-semibold">@peterjones</span>        </div>        <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-700">Mention</button>      </div>    </div>  </div></div>

用户提及组件

一个简单、响应迅速的用户提到了具有拟物化设计、类似配色方案和深色模式支持的组件。

打开预览

                <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-xl">
  <div class="flex items-center mb-4">
    <img class="w-10 h-10 rounded-full mr-4 shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
    <p class="text-gray-800 dark:text-gray-200 font-semibold text-lg">John Doe</p>
  </div>
  <p class="text-gray-700 dark:text-gray-300">
    Mentioned you in a comment: 
    <span class="text-blue-600 dark:text-blue-400">@JaneSmith</span> This is a great point!
  </p>
</div>

用户提及组件

响应式 User Mentions 组件，具有 3D 设计元素、灰度配色方案和深色主题支持，适用于商业/公司网站。使用 Tailwind CSS 并包含占位符图像/头像。

打开预览

                <div class="bg-gray-100 dark:bg-gray-900 py-8">
  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden relative">
      <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 opacity-50"></div>
      <div class="relative p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">User Mentions</h2>
        <div class="space-y-4">
          <div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
            <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Mentioned you in a comment.</p>
            </div>
          </div>

          <div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
            <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <p class="text-gray-800 dark:text-gray-200 font-semibold">Jane Smith</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Replied to your thread.</p>
            </div>
          </div>

          <div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
            <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
            <div>
              <p class="text-gray-800 dark:text-gray-200 font-semibold">Peter Jones</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Liked your post.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>