组件 标签云 标签云组件

标签云组件

标签云组件,采用拟物设计风格,具有响应式效果和暗主题支持,使用Tailwind CSS。

预览

HTML 代码

<div class="p-8 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-lg">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-100">Tag Cloud</h2>
    <div class="flex flex-wrap gap-4">
        <span class="px-4 py-2 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">HTML</span>
        <span class="px-4 py-2 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">CSS</span>
        <span class="px-4 py-2 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">JavaScript</span>
        <span class="px-4 py-2 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">React</span>
        <span class="px-4 py-2 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">Tailwind CSS</span>
        <span class="px-4 py-2 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">Neumorphism</span>
        <span class="px-4 py-2 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">UI Design</span>
        <span class="px-4 py-2 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">Web Development</span>
    </div>
</div>

相关组件

标签云组件

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

打开

标记云组件

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

打开

标记云组件

一个复杂的响应式 Tag Cloud 组件,具有微交互功能,专为仪表板设计,使用灰度配色方案。支持深色模式。

打开