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

用户提及组件

一个使用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 组件,具有 Glassmorphism 设计、类似配色方案和深色主题支持。

打开

用户提及组件

一个响应式用户提及组件,支持黑暗主题,使用 Tailwind CSS。不需要 JavaScript,仅需 HTML 和 Tailwind 类。对于暗模式,请使用 Tailwind 的 dark: 前缀进行样式设置。图片来自 picsum.photos,头像来自 randomuser.me。

打开