组件 标签云 标签云组件 13

标签云组件 13

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

预览

HTML 代码

<div class="flex flex-wrap justify-center p-8 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-lg">
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 1
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 2
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 3
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 4
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 5
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 6
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 7
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 8
        </a>
    </div>
</div>

<style>
    .shadow-neumorphism {
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1),
                    -10px -10px 20px rgba(255, 255, 255, 0.5);
    }
</style>

相关组件

标签云组件

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

打开

标签云组件

一个具有灰度色彩和微交互的响应式标签云组件,设计用于支持黑暗主题的社交媒体接口。

打开

标签云组件

一个为作品集设计的 Neumorphic 标签云组件,展示带有单色方案的标签,响应式布局,并支持使用 Tailwind CSS 的深色模式。

打开