组件 徽章 徽章组件

徽章组件

一个简约的仪表板徽章组件,具有大地色调和深色模式支持。

预览

HTML 代码

<div class="flex flex-wrap p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
    <div class="flex items-center m-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-brown-600" />
        <span class="ml-2 text-brown-600 dark:text-brown-400 font-semibold">Design Team</span>
        <span class="ml-2 px-2 py-1 text-sm text-white bg-brown-600 rounded-full">3</span>
    </div>
    <div class="flex items-center m-2">
        <img src="https://picsum.photos/id/1018/100/100" alt="Project Image" class="w-10 h-10 rounded-full border-2 border-brown-600" />
        <span class="ml-2 text-brown-600 dark:text-brown-400 font-semibold">Project A</span>
        <span class="ml-2 px-2 py-1 text-sm text-white bg-brown-600 rounded-full">5</span>
    </div>
    <div class="flex items-center m-2">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-green-600" />
        <span class="ml-2 text-green-600 dark:text-green-400 font-semibold">Marketing</span>
        <span class="ml-2 px-2 py-1 text-sm text-white bg-green-600 rounded-full">8</span>
    </div>
    <div class="flex items-center m-2">
        <img src="https://picsum.photos/id/1031/100/100" alt="Project Image" class="w-10 h-10 rounded-full border-2 border-red-600" />
        <span class="ml-2 text-red-600 dark:text-red-400 font-semibold">Project B</span>
        <span class="ml-2 px-2 py-1 text-sm text-white bg-red-600 rounded-full">2</span>
    </div>
</div>

相关组件

Industrial_Candy_Finance_Badges_Component

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

打开

徽章组件

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

打开

徽章组件

一个具有 3D 设计的响应式徽章组件,具有深度和支持深色主题。每个徽章代表一个用户,包含名字、图像和描述,使用 Tailwind CSS 设计。

打开