组件 徽章 徽章组件

徽章组件

具有响应式黑暗主题支持的徽章组件,适用于电子商务。

预览

HTML 代码

<div class="flex justify-center items-center h-screen bg-gray-800 dark:bg-gray-900">
  <div class="flex flex-wrap gap-2 p-4 rounded-lg bg-gray-700 dark:bg-gray-800">
    <span class="px-3 py-1 text-sm font-semibold text-amber-100 bg-amber-600 rounded-full dark:bg-amber-700 dark:text-amber-200">New Arrival</span>
    <span class="px-3 py-1 text-sm font-semibold text-teal-100 bg-teal-600 rounded-full dark:bg-teal-700 dark:text-teal-200">Top Rated</span>
    <span class="px-3 py-1 text-sm font-semibold text-fuchsia-100 bg-fuchsia-600 rounded-full dark:bg-fuchsia-700 dark:text-fuchsia-200">Limited Stock</span>
    <span class="px-3 py-1 text-sm font-semibold text-orange-100 bg-orange-600 rounded-full dark:bg-orange-700 dark:text-orange-200">On Sale</span>
    <span class="px-3 py-1 text-sm font-semibold text-rose-100 bg-rose-600 rounded-full dark:bg-rose-700 dark:text-rose-200">Bestseller</span>
  </div>
</div>

相关组件

Industrial_Candy_Finance_Badges_Component

用于金融/银行的复杂徽章组件,将工业美学与明亮的糖果色融为一体。具有多个交互式徽章、响应式设计和深色模式支持。

打开

徽章组件

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

打开

徽章组件

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

打开