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

相关组件

Glassmorphism_Grayscale_Badges_Component

一个简单、响应式 glassmorphism 风格的徽章组件,具有灰度配色方案,适用于商业/公司网站。包括深色模式支持。

打开

徽章组件

一个设计用于博客内容消费的新拟态徽章组件,具有互动元素和支持暗模式的响应式设计。

打开

徽章组件

用于电子商务的响应式深色模式徽章组件,通过互补的配色方案和交互式元素展示各种徽章。

打开