CCHub Logo CCHub Tailwind Collection
组件 徽章 徽章组件

徽章组件

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

预览

HTML 代码 

<div class="flex flex-wrap gap-4 p-6 bg-white dark:bg-gray-800">
    <div class="relative inline-block">
        <img src="https://picsum.photos/200" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
        <span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-blue-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">1</span>
    </div>
    <div class="relative inline-block">
        <img src="https://picsum.photos/201" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
        <span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-green-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">2</span>
    </div>
    <div class="relative inline-block">
        <img src="https://picsum.photos/202" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
        <span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-yellow-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">3</span>
    </div>
    <div class="relative inline-block">
        <img src="https://picsum.photos/203" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
        <span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-red-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">4</span>
    </div>
</div>

<style>
/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .bg-white {
        background-color: #1f2937; /* Gray-800 */
    }
    .text-white {
        color: #f9fafb; /* Gray-100 */
    }
}
</style>

相关组件

徽章组件

一个简单的 Glassmorphism 风格的徽章组件，用于社交媒体，具有带有模糊的磨砂玻璃效果、相似颜色和使用 Tailwind CSS 的深色模式支持。它是响应式的，并在必要时使用 picsum.photos 获取图像，使用 randomuser.me 获取头像。不包含 JavaScript。

打开

Neumorphism 徽章

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

打开

徽章组件 - 深色模式大地色调

一个复杂的徽章组件系统，采用大地色调设计，适用于深色模式博客/内容界面。该组件包括文章类别、用户状态、内容标记、通知和成就指示器的各种徽章类型。全部使用自然的大地色调，并支持深色模式。该设计是完全响应的，并适应不同的屏幕尺寸。

打开