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

用户提及组件

用户提及组件,采用透明玻璃风格,具有响应式设计和暗黑模式支持。

预览

HTML 代码

<div class="flex items-center p-4 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-20 transition-all duration-300 ease-in-out">
  <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
  <div class="flex-grow">
    <p class="text-white font-semibold text-lg dark:text-white">John Doe</p>
    <p class="text-gray-200 text-sm dark:text-gray-300">@johndoe</p>
  </div>
  <button class="px-3 py-1 bg-blue-500 text-white text-sm rounded hover:bg-blue-600 transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-800">
    Follow
  </button>
</div>

相关组件

用户提及组件

一个用户提及组件,采用玻璃质感风格,具有磨砂玻璃般的半透明元素和模糊效果。它支持暗主题,并且响应式,适合电子商务网站。

打开

用户提及组件

一个响应式用户提及组件,支持深色主题和微交互,专为使用Tailwind CSS的商业网站设计。

打开

用户提及组件

Neumorphism 风格的用户提到了使用大地色调的组件用于投资组合网站,具有响应式设计和深色模式支持。

打开