组件 徽章 Neumorphism 徽章

Neumorphism 徽章

这是一个 Neumorphism 风格的徽章组件,具有柔和的配色方案,专为 Portfolio 设计并使用 Tailwind CSS。

预览

HTML 代码

<div class="flex flex-wrap justify-center gap-4 p-4 bg-gray-200 dark:bg-gray-800">
  <span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
    HTML
  </span>
  <span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
    CSS
  </span>
  <span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
    Tailwind CSS
  </span>
  nocode
</div>

<style>
.shadow-neumorphism-light {
  box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #ffffff;
}

.dark .shadow-neumorphism-dark {
  box-shadow: 5px 5px 10px #454545, -5px -5px 10px #3a3a3a;
}
</style>

相关组件

徽章组件

具有灰度配色方案的复古主题徽章组件,适用于博客或内容网站。它具有多个交互元素和完全响应能力,并支持深色模式。该设计避免使用 JavaScript,仅依赖 HTML 和 Tailwind CSS。

打开

徽章组件 - 3D 类似仪表盘

一个响应式徽章组件,具有3D设计、类似色彩方案、适中的复杂性和仪表板的黑暗主题支持。仅使用Tailwind CSS类。

打开

徽章组件

一个响应式徽章组件,具有微交互和暗模式支持,使用Tailwind CSS设计。该组件包括悬停效果,并使用占位符图像作为头像。

打开