组件 徽章 复古徽章

复古徽章

用于商业/企业网站的复古/复古徽章组件,具有互补色彩方案。简单布局,响应式设计,支持暗主题。无JavaScript.

预览

HTML 代码

<div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-900">
  <!-- Badge 1 -->
  <span class="px-3 py-1 text-sm font-semibold text-purple-800 bg-purple-200 rounded-full dark:text-purple-200 dark:bg-purple-800">
    Vintage Vibe
  </span>

  <!-- Badge 2 -->
  <span class="px-3 py-1 text-sm font-semibold text-yellow-800 bg-yellow-200 rounded-full dark:text-yellow-200 dark:bg-yellow-800">
    Retro Style
  </span>

  <!-- Badge 3 -->
  <span class="px-3 py-1 text-sm font-semibold text-green-800 bg-green-200 rounded-full dark:text-green-200 dark:bg-green-800">
    Classic Look
  </span>
</div>

相关组件

徽章组件

一个 Neumorphic Badges 组件,具有博客/内容网站的类似配色方案。它具有响应式设计和深色主题支持,仅使用 HTML 和 Tailwind CSS。

打开

徽章组件

一个响应式徽章组件,具有引人入胜的微交互,使用Tailwind CSS设计。支持暗模式并包括图像占位符。

打开

徽章组件

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

打开