组件 标签云 标签云组件

标签云组件

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

预览

HTML 代码

<div class="flex flex-wrap justify-center mt-10 p-5 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-lg">
    <h2 class="w-full text-2xl font-semibold text-center text-gray-800 dark:text-gray-200 mb-5">Explore Tags</h2>
    <div class="flex flex-wrap justify-center gap-4">
        <span class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-full shadow-md hover:shadow-lg transition-all cursor-pointer transform hover:-translate-y-1">Fashion</span>
        <span class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-full shadow-md hover:shadow-lg transition-all cursor-pointer transform hover:-translate-y-1">Electronics</span>
        <span class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-full shadow-md hover:shadow-lg transition-all cursor-pointer transform hover:-translate-y-1">Home & Living</span>
        <span class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-full shadow-md hover:shadow-lg transition-all cursor-pointer transform hover:-translate-y-1">Books</span>
        <span class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-full shadow-md hover:shadow-lg transition-all cursor-pointer transform hover:-translate-y-1">Beauty</span>
    </div>
</div>

相关组件

新拟态标签云组件

一个响应式标签云组件,采用拟态设计,使用柔和的颜色方案和复杂的交互,专为电子商务量身定做。包含暗模式支持,并使用Tailwind CSS。

打开

标记云组件

一个响应式标签云组件,具有 Material Design 样式、互补的配色方案和适度的复杂性,适用于电子商务目的,具有深色主题支持。

打开

标签云组件

一个具有响应式效果和暗黑模式支持的复古/怀旧标签云组件,使用 Tailwind CSS.

打开