组件 徽章 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.

打开

徽章组件

一个响应式徽章组件,采用大地色调的3D风格,具有适合仪表板的互动元素。

打开

徽章组件

专为社交媒体界面设计的响应式徽章组件,具有引人入胜的微交互和互补配色方案,支持深色模式。

打开