组件 用户提及 用户提及组件

用户提及组件

一个使用Tailwind CSS的用户提及组件,具有3D设计、响应效果和暗主题支持。

预览

HTML 代码

<div class="flex items-center space-x-4 p-4 bg-white rounded-lg shadow-xl transition-transform transform hover:scale-105 dark:bg-gray-800">
  <img class="w-12 h-12 rounded-full border-2 border-blue-500" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
  <div class="flex-1">
    <p class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</p>
    <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
  </div>
  <span class="inline-block bg-blue-500 text-white text-xs px-3 py-1 rounded-full shadow-md dark:bg-blue-600">
    Mentioned
  </span>
</div>

相关组件

User Mentions 组件

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

打开

User Mentions 组件

一个复杂、极简的用户提到了专为教育平台设计的组件,具有霓虹灯/电色调方案、响应能力和深色模式支持。它显示最近的提及以及用户头像、消息和时间戳,包括“查看全部”按钮。

打开

用户提及组件 - 拟物设计

一个用户提及组件,采用拟物设计,具有响应式效果和暗主题支持,仅使用HTML和Tailwind CSS,无需JavaScript。

打开