组件 标签云 标记云组件

标记云组件

标记 Cloud Component 深色模式

预览

HTML 代码

<div class="dark:bg-gray-900 dark:text-gray-200 min-h-screen p-8">
  <div class="max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold mb-6 text-amber-600 dark:text-amber-400">Popular Product Tags</h2>
    <div class="flex flex-wrap gap-3">
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Electronics</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Home Goods</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Apparel</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Books</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Sports & Outdoors</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Beauty</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Toys</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Automotive</a>
    </div>
  </div>
</div>

相关组件

标记云组件

一个简单、响应迅速且充满活力的标签云组件,采用包豪斯原则为商业和企业网站设计,具有几何形状和高饱和度原色,并支持深色模式。

打开

标记 Cloud 组件 - Marketplace Sepia/Brown Material Design

一个复杂的响应式标签云组件,专为市场平台设计,使用棕褐色/棕色调的 Material Design 原则。具有交互式标签、类别筛选和深色模式支持。

打开

标签云组件 13

一个采用新拟态风格设计的标签云组件。它具有柔和的用户界面风格,元素看起来像是从背景中凸显出来,使用细腻的阴影。该组件支持响应式设计和深色主题。

打开