组件 徽章 Pastel Badges 深色模式 UI

Pastel Badges 深色模式 UI

适用于商业网站的简单响应式徽章组件,具有深色模式 UI 和柔和的色彩。它使用 Tailwind CSS 设计,使用深色背景来减少眼睛疲劳并支持响应式布局。

预览

HTML 代码

<div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-900">
  <span class="px-3 py-1 text-sm font-medium text-purple-800 bg-purple-200 rounded-full dark:bg-purple-700 dark:text-purple-100">
    Business
  </span>
  <span class="px-3 py-1 text-sm font-medium text-green-800 bg-green-200 rounded-full dark:bg-green-700 dark:text-green-100">
    Corporate
  </span>
  <span class="px-3 py-1 text-sm font-medium text-blue-800 bg-blue-200 rounded-full dark:bg-blue-700 dark:text-blue-100">
    Innovation
  </span>
  <span class="px-3 py-1 text-sm font-medium text-pink-800 bg-pink-200 rounded-full dark:bg-pink-700 dark:text-pink-100">
    Strategy
  </span>
  <span class="px-3 py-1 text-sm font-medium text-yellow-800 bg-yellow-200 rounded-full dark:bg-yellow-700 dark:text-yellow-100">
    Growth
  </span>
</div>

相关组件

徽章组件

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

打开

Neumorphism 徽章

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

打开

徽章组件

一个简单的响应式徽章组件,支持深色模式,使用适合投资组合的三元配色方案。

打开