组件 标签云 标签云组件

标签云组件

一个专为社交媒体界面设计的响应式标签云组件,配有暗模式用户界面和彩色柔和的色彩方案。

预览

HTML 代码

<div class="bg-gray-900 text-gray-200 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
  <h2 class="text-2xl font-bold mb-4">Explore Tags</h2>
  <div class="flex flex-wrap">
    <span class="bg-pink-300 text-gray-900 hover:bg-pink-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#WebDevelopment</span>
    <span class="bg-blue-300 text-gray-900 hover:bg-blue-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#ReactJS</span>
    <span class="bg-green-300 text-gray-900 hover:bg-green-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#TailwindCSS</span>
    <span class="bg-yellow-300 text-gray-900 hover:bg-yellow-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#JavaScript</span>
    <span class="bg-purple-300 text-gray-900 hover:bg-purple-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#CSS</span>
    <span class="bg-red-300 text-gray-900 hover:bg-red-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#Frontend</span>
  </div>
  <div class="mt-6">
    <h3 class="text-xl font-semibold mb-2">Popular Users</h3>
    <div class="flex items-center mb-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <span class="ml-3 text-lg">Jane Doe</span>
    </div>
    <div class="flex items-center mb-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <span class="ml-3 text-lg">John Smith</span>
    </div>
    <div class="flex items-center mb-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">
      <span class="ml-3 text-lg">Alice Johnson</span>
    </div>
  </div>
  <div class="mt-4">
    <h3 class="text-xl font-semibold mb-2">Featured Posts</h3>
    <img class="w-full rounded-lg mb-2" src="https://picsum.photos/500/300" alt="Featured Post">
    <img class="w-full rounded-lg mb-2" src="https://picsum.photos/500/301" alt="Featured Post">
    <img class="w-full rounded-lg mb-2" src="https://picsum.photos/500/302" alt="Featured Post">
  </div>
</div>

相关组件

标签云组件

一个采用新拟态风格设计的标签云组件,利用单色配色方案用于电子商务,同时支持响应式设计和黑暗主题。

打开

标记云组件

一个响应式标签云组件,具有等宽/开发人员设计、霓虹灯/电色方案和深色模式支持,适用于娱乐/媒体平台。

打开

Bauhaus 标签云组件

一个复杂的响应式标签云组件,具有包豪斯风格的设计,使用酷炫的中性色,适用于支持深色模式的教育平台。

打开