|$ curl https://forge-ai.dev/api/markdown?path=docs/components/badges

$cat docs/badges-&-tags.md

updated Recently·14 min read·published

Badges & Tags

◆CSS◆HTML◆Tailwind◆Bootstrap◆UI◆Intermediate🎯Free Tools

Introduction

Badges and tags are compact status and labeling elements. This guide covers production-ready patterns in plain HTML/CSS, Tailwind CSS, and Bootstrap — including color variants, outline styles, sizes, status dots, notification counts, removable chips, pill badges, and accessibility.

ℹ

info

Use a real <span> for badges rather than clickable divs. For interactive chips, use <button> with an accessible name and a visible focus indicator.

Color Variants

Six semantic color variants for labels, status, and metadata.

variants

Live

untitled.html

HTML

1	<div class="g">
2	<span class="b primary">
3	Primary
4	</span>
5	<span class="b success">
6	Success
7	</span>
8	<span class="b warning">
9	Warning
10	</span>
11	<span class="b danger">
12	Danger
13	</span>
14	<span class="b info">
15	Info
16	</span>
17	<span class="b neutral">
18	Neutral
19	</span>
20	</div>

preview

Outline Variants

Border-only badges for a lighter visual footprint on dark surfaces.

outline

Live

untitled.html

HTML

1	<div class="g">
2	<span class="b primary">
3	Primary
4	</span>
5	<span class="b success">
6	Success
7	</span>
8	<span class="b warning">
9	Warning
10	</span>
11	<span class="b danger">
12	Danger
13	</span>
14	<span class="b info">
15	Info
16	</span>
17	</div>

preview

Sizes

Small, default, and large badges to match surrounding text density.

sizes

Live

untitled.html

HTML

1	<div class="g">
2	<span class="b sm">
3	Small
4	</span>
5	<span class="b md">
6	Default
7	</span>
8	<span class="b lg">
9	Large
10	</span>
11	</div>

preview

Dot Badges

Status indicator dots for online, offline, away, and busy states.

dot

Live

untitled.html

HTML

1	<div class="g">
2	<span class="dot on">
3	</span>
4	<span class="label">
5	Online
6	</span>
7	<span class="dot off">
8	</span>
9	<span class="label">
10	Offline
11	</span>
12	<span class="dot away">
13	</span>
14	<span class="label">
15	Away
16	</span>
17	<span class="dot busy">
18	</span>
19	<span class="label">
20	Busy
21	</span>
22	</div>

preview

Count Badges

Notification counts positioned on icons and buttons.

count

Live

untitled.html

HTML

1	<div class="g">
2	<div class="icon-wrap">
3	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" style="color:#A0A0A0">
4	<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
5	<path d="M13.73 21a2 2 0 0 1-3.46 0"/>
6	</svg>
7	<span class="count">
8	3
9	</span>
10	</div>
11	<div class="icon-wrap">
12	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" style="color:#A0A0A0">
13	<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
14	<path d="M12 6v6l4 2"/>
15	</svg>
16	<span class="count dot-only">
17	</span>
18	</div>
19	<button class="btn">
20	Inbox
21	<span class="c">
22	12
23	</span>
24	</button>
25	</div>

preview

Tags / Chips

Removable tags and filter chips with a close affordance.

tags

Live

untitled.html

HTML

1	<div class="g">
2	<span class="tag">
3	React
4	<span class="close">
5	×
6	</span>
7	</span>
8	<span class="tag">
9	TypeScript
10	<span class="close">
11	×
12	</span>
13	</span>
14	<span class="tag">
15	CSS
16	<span class="close">
17	×
18	</span>
19	</span>
20	<span class="tag">
21	Tailwind
22	<span class="close">
23	×
24	</span>
25	</span>
26	<span class="add">
27	+ Add tag
28	</span>
29	</div>

preview

Pill & Special Effects

Gradient fills, glows, glassmorphism, and bordered pills for premium surfaces.

pill-badges

Live

untitled.html

HTML

1	<div class="g">
2	<span class="b gradient">
3	Premium
4	</span>
5	<span class="b glow">
6	New
7	</span>
8	<span class="b glass">
9	Beta
10	</span>
11	<span class="b border">
12	Pro
13	</span>
14	</div>

preview

With Icons

Badges paired with inline SVG icons for clearer meaning.

with-icons

Live

untitled.html

HTML

1	<div class="g">
2	<span class="b">
3	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" width="12" height="12">
4	<polyline points="20 6 9 17 4 12"/>
5	</svg>
6	Verified
7	</span>
8	<span class="b warn">
9	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" width="12" height="12">
10	<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
11	<line x1="12" y1="9" x2="12" y2="13"/>
12	<line x1="12" y1="17" x2="12.01" y2="17"/>
13	</svg>
14	Warning
15	</span>
16	<span class="b danger">
17	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" width="12" height="12">
18	<circle cx="12" cy="12" r="10"/>
19	<line x1="15" y1="9" x2="9" y2="15"/>
20	<line x1="9" y1="9" x2="15" y2="15"/>
21	</svg>
22	Failed
23	</span>
24	</div>

preview

Accessibility

Badges are small but must remain readable and meaningful. Pair color with text or an icon, and ensure interactive chips behave like real controls.

Use sufficient contrast between badge text and background; do not rely on color alone.
Icon-only badges need an aria-label or visually hidden text.
Removable chips should use a <button> with an accessible name like "Remove React".
Status dots should include a visible text label or an aria-label such as "Status: online".
Notification counts should be announced via an aria-label on the parent, e.g. "Inbox, 12 unread messages".

Community

Get help on Slack, Discord or VIP

Stuck on a guide? Join the community and ask.

Join Slack Join Discord Kaundal VIP

X GitHub YouTube Instagram Facebook Discord Slack Telegram Buy me a coffee Ko-fi Sponsor

1	* {
2	margin:0;
3	padding:0;
4	box-sizing:border-box
5	}
6	body {
7	font-family:system-ui,
8	-apple-system,
9	BlinkMacSystemFont,
10	"Segoe UI",
11	Roboto,
12	sans-serif;
13	background:#0A0A0A;
14	padding:24px
15	}
16	.g {
17	display:flex;
18	flex-wrap:wrap;
19	gap:10px;
20	justify-content:center;
21	padding:24px
22	}
23	.b {
24	padding:4px 12px;
25	border-radius:999px;
26	font-size:11px;
27	font-weight:600;
28	line-height:1.5
29	}
30	.primary {
31	background:rgba(0,
32	255,
33	65,
34	.12);
35	color:#00FF41
36	}
37	.success {
38	background:rgba(34,
39	197,
40	94,
41	.12);
42	color:#22C55E
43	}
44	.warning {
45	background:rgba(234,
46	179,
47	8,
48	.12);
49	color:#EAB308
50	}
51	.danger {
52	background:rgba(239,
53	68,
54	68,
55	.12);
56	color:#EF4444
57	}
58	.info {
59	background:rgba(59,
60	130,
61	246,
62	.12);
63	color:#3B82F6
64	}
65	.neutral {
66	background:rgba(160,
67	160,
68	160,
69	.12);
70	color:#A0A0A0
71	}

1	* {
2	margin:0;
3	padding:0;
4	box-sizing:border-box
5	}
6	body {
7	font-family:system-ui,
8	-apple-system,
9	BlinkMacSystemFont,
10	"Segoe UI",
11	Roboto,
12	sans-serif;
13	background:#0A0A0A;
14	padding:24px
15	}
16	.g {
17	display:flex;
18	flex-wrap:wrap;
19	gap:10px;
20	justify-content:center;
21	padding:24px
22	}
23	.b {
24	padding:4px 12px;
25	border-radius:999px;
26	font-size:11px;
27	font-weight:600;
28	line-height:1.5;
29	background:transparent;
30	border:1.5px solid
31	}
32	.primary {
33	color:#00FF41;
34	border-color:#00FF41
35	}
36	.success {
37	color:#22C55E;
38	border-color:#22C55E
39	}
40	.warning {
41	color:#EAB308;
42	border-color:#EAB308
43	}
44	.danger {
45	color:#EF4444;
46	border-color:#EF4444
47	}
48	.info {
49	color:#3B82F6;
50	border-color:#3B82F6
51	}

1	* {
2	margin:0;
3	padding:0;
4	box-sizing:border-box
5	}
6	body {
7	font-family:system-ui,
8	-apple-system,
9	BlinkMacSystemFont,
10	"Segoe UI",
11	Roboto,
12	sans-serif;
13	background:#0A0A0A;
14	padding:24px
15	}
16	.g {
17	display:flex;
18	flex-wrap:wrap;
19	gap:12px;
20	align-items:center;
21	justify-content:center;
22	padding:24px
23	}
24	.b {
25	border-radius:999px;
26	font-weight:600;
27	background:rgba(0,
28	255,
29	65,
30	.12);
31	color:#00FF41
32	}
33	.sm {
34	padding:2px 8px;
35	font-size:9px
36	}
37	.md {
38	padding:4px 12px;
39	font-size:11px
40	}
41	.lg {
42	padding:6px 16px;
43	font-size:13px
44	}

1	* {
2	margin:0;
3	padding:0;
4	box-sizing:border-box
5	}
6	body {
7	font-family:system-ui,
8	-apple-system,
9	BlinkMacSystemFont,
10	"Segoe UI",
11	Roboto,
12	sans-serif;
13	background:#0A0A0A;
14	padding:24px
15	}
16	.g {
17	display:flex;
18	flex-wrap:wrap;
19	gap:12px;
20	align-items:center;
21	justify-content:center;
22	padding:24px
23	}
24	.dot {
25	width:10px;
26	height:10px;
27	border-radius:50%;
28	display:inline-block
29	}
30	.on {
31	background:#22C55E;
32	box-shadow:0 0 6px rgba(34,
33	197,
34	94,
35	.5)
36	}
37	.off {
38	background:#525252
39	}
40	.away {
41	background:#EAB308;
42	box-shadow:0 0 6px rgba(234,
43	179,
44	8,
45	.5)
46	}
47	.busy {
48	background:#EF4444;
49	box-shadow:0 0 6px rgba(239,
50	68,
51	68,
52	.5)
53	}
54	.label {
55	font-size:12px;
56	color:#A0A0A0;
57	font-weight:500
58	}

1	* {
2	margin:0;
3	padding:0;
4	box-sizing:border-box
5	}
6	body {
7	font-family:system-ui,
8	-apple-system,
9	BlinkMacSystemFont,
10	"Segoe UI",
11	Roboto,
12	sans-serif;
13	background:#0A0A0A;
14	padding:24px
15	}
16	.g {
17	display:flex;
18	gap:32px;
19	align-items:center;
20	justify-content:center;
21	padding:32px
22	}
23	.icon-wrap {
24	position:relative
25	}
26	.count {
27	position:absolute;
28	top:-6px;
29	right:-8px;
30	min-width:18px;
31	height:18px;
32	padding:0 5px;
33	border-radius:9px;
34	background:#EF4444;
35	color:#fff;
36	font-size:10px;
37	font-weight:700;
38	display:flex;
39	align-items:center;
40	justify-content:center;
41	line-height:1;
42	box-shadow:0 2px 4px rgba(0,
43	0,
44	0,
45	.3)
46	}
47	.dot-only {
48	min-width:10px;
49	height:10px;
50	padding:0;
51	right:-4px;
52	top:-2px;
53	border-radius:50%;
54	background:#EF4444
55	}
56	.btn {
57	display:inline-flex;
58	align-items:center;
59	gap:8px;
60	padding:8px 16px;
61	border-radius:8px;
62	font-size:12px;
63	font-weight:600;
64	font-family:system-ui,
65	sans-serif;
66	cursor:pointer;
67	border:1px solid #2A2A3E;
68	background:#1A1A2E;
69	color:#E0E0E0
70	}
71	.c {
72	background:rgba(0,
73	255,
74	65,
75	.15);
76	color:#00FF41;
77	padding:2px 7px;
78	border-radius:999px;
79	font-size:10px;
80	font-weight:700
81	}

1	<div class="flex flex-wrap gap-2.5 justify-center p-6">
2	<span class="px-3 py-1 rounded-full text-[11px] font-semibold bg-[rgba(0,255,65,0.12)] text-[#00FF41]">
3	Primary
4	</span>
5	<span class="px-3 py-1 rounded-full text-[11px] font-semibold bg-[rgba(34,197,94,0.12)] text-[#22C55E]">
6	Success
7	</span>
8	<span class="px-3 py-1 rounded-full text-[11px] font-semibold bg-[rgba(234,179,8,0.12)] text-[#EAB308]">
9	Warning
10	</span>
11	<span class="px-3 py-1 rounded-full text-[11px] font-semibold bg-[rgba(239,68,68,0.12)] text-[#EF4444]">
12	Danger
13	</span>
14	<span class="px-3 py-1 rounded-full text-[11px] font-semibold bg-[rgba(59,130,246,0.12)] text-[#3B82F6]">
15	Info
16	</span>
17	<span class="px-3 py-1 rounded-full text-[11px] font-semibold bg-[rgba(160,160,160,0.12)] text-[#A0A0A0]">
18	Neutral
19	</span>
20	</div>

1	<div class="d-flex flex-wrap gap-2 justify-content-center p-4">
2	<span class="badge" style="background:rgba(0,255,65,0.12);color:#00FF41">
3	Primary
4	</span>
5	<span class="badge" style="background:rgba(34,197,94,0.12);color:#22C55E">
6	Success
7	</span>
8	<span class="badge" style="background:rgba(234,179,8,0.12);color:#EAB308">
9	Warning
10	</span>
11	<span class="badge" style="background:rgba(239,68,68,0.12);color:#EF4444">
12	Danger
13	</span>
14	<span class="badge" style="background:rgba(59,130,246,0.12);color:#3B82F6">
15	Info
16	</span>
17	<span class="badge" style="background:rgba(160,160,160,0.12);color:#A0A0A0">
18	Neutral
19	</span>
20	</div>

1	<div class="d-flex flex-wrap gap-2 justify-content-center p-4">
2	<span class="badge bg-transparent border" style="border-color:#00FF41;color:#00FF41">
3	Primary
4	</span>
5	<span class="badge bg-transparent border" style="border-color:#22C55E;color:#22C55E">
6	Success
7	</span>
8	<span class="badge bg-transparent border" style="border-color:#EAB308;color:#EAB308">
9	Warning
10	</span>
11	<span class="badge bg-transparent border" style="border-color:#EF4444;color:#EF4444">
12	Danger
13	</span>
14	<span class="badge bg-transparent border" style="border-color:#3B82F6;color:#3B82F6">
15	Info
16	</span>
17	</div>

1	<div class="flex flex-wrap gap-3 items-center justify-center p-6">
2	<span class="px-2 py-0.5 rounded-full text-[9px] font-semibold bg-[rgba(0,255,65,0.12)] text-[#00FF41]">
3	Small
4	</span>
5	<span class="px-3 py-1 rounded-full text-[11px] font-semibold bg-[rgba(0,255,65,0.12)] text-[#00FF41]">
6	Default
7	</span>
8	<span class="px-4 py-1.5 rounded-full text-[13px] font-semibold bg-[rgba(0,255,65,0.12)] text-[#00FF41]">
9	Large
10	</span>
11	</div>

1	<div class="d-flex flex-wrap gap-3 align-items-center justify-content-center p-4">
2	<span class="badge" style="background:rgba(0,255,65,0.12);color:#00FF41;font-size:9px;padding:2px 8px">
3	Small
4	</span>
5	<span class="badge" style="background:rgba(0,255,65,0.12);color:#00FF41">
6	Default
7	</span>
8	<span class="badge" style="background:rgba(0,255,65,0.12);color:#00FF41;font-size:13px;padding:6px 16px">
9	Large
10	</span>
11	</div>

1	<div class="flex flex-wrap gap-3 items-center justify-center p-6">
2	<span class="w-2.5 h-2.5 rounded-full bg-[#22C55E] shadow-[0_0_6px_rgba(34,197,94,0.5)]">
3	</span>
4	<span class="text-xs font-medium text-[#A0A0A0]">
5	Online
6	</span>
7	<span class="w-2.5 h-2.5 rounded-full bg-[#525252]">
8	</span>
9	<span class="text-xs font-medium text-[#A0A0A0]">
10	Offline
11	</span>
12	<span class="w-2.5 h-2.5 rounded-full bg-[#EAB308] shadow-[0_0_6px_rgba(234,179,8,0.5)]">
13	</span>
14	<span class="text-xs font-medium text-[#A0A0A0]">
15	Away
16	</span>
17	<span class="w-2.5 h-2.5 rounded-full bg-[#EF4444] shadow-[0_0_6px_rgba(239,68,68,0.5)]">
18	</span>
19	<span class="text-xs font-medium text-[#A0A0A0]">
20	Busy
21	</span>
22	</div>

1	<div class="d-flex flex-wrap gap-3 align-items-center justify-content-center p-4">
2	<span class="d-inline-block rounded-circle" style="width:10px;height:10px;background:#22C55E;box-shadow:0 0 6px rgba(34,197,94,0.5)">
3	</span>
4	<span class="small text-secondary">
5	Online
6	</span>
7	<span class="d-inline-block rounded-circle" style="width:10px;height:10px;background:#525252">
8	</span>
9	<span class="small text-secondary">
10	Offline
11	</span>
12	<span class="d-inline-block rounded-circle" style="width:10px;height:10px;background:#EAB308;box-shadow:0 0 6px rgba(234,179,8,0.5)">
13	</span>
14	<span class="small text-secondary">
15	Away
16	</span>
17	<span class="d-inline-block rounded-circle" style="width:10px;height:10px;background:#EF4444;box-shadow:0 0 6px rgba(239,68,68,0.5)">
18	</span>
19	<span class="small text-secondary">
20	Busy
21	</span>
22	</div>

1	<div class="flex gap-8 items-center justify-center p-8">
2	<div class="relative">
3	<svg class="w-6 h-6 text-[#A0A0A0]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
4	<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
5	<path d="M13.73 21a2 2 0 0 1-3.46 0"/>
6	</svg>
7	<span class="absolute -top-1.5 -right-2 min-w-[18px] h-[18px] px-1.5 rounded-full bg-[#EF4444] text-white text-[10px] font-bold flex items-center justify-center shadow-md">
8	3
9	</span>
10	</div>
11	<div class="relative">
12	<svg class="w-6 h-6 text-[#A0A0A0]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
13	<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
14	<path d="M12 6v6l4 2"/>
15	</svg>
16	<span class="absolute -top-0.5 -right-1 w-2.5 h-2.5 rounded-full bg-[#EF4444]">
17	</span>
18	</div>
19	<button class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-xs font-semibold border border-[#2A2A3E] bg-[#1A1A2E] text-[#E0E0E0]">
20	Inbox
21	<span class="bg-[rgba(0,255,65,0.15)] text-[#00FF41] px-1.5 py-0.5 rounded-full text-[10px] font-bold">
22	12
23	</span>
24	</button>
25	</div>

1	<div class="d-flex gap-4 align-items-center justify-content-center p-4">
2	<div class="position-relative">
3	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:#A0A0A0">
4	<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
5	<path d="M13.73 21a2 2 0 0 1-3.46 0"/>
6	</svg>
7	<span class="badge rounded-pill position-absolute top-0 start-100 translate-middle" style="background:#EF4444">
8	3
9	</span>
10	</div>
11	<div class="position-relative">
12	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:#A0A0A0">
13	<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
14	<path d="M12 6v6l4 2"/>
15	</svg>
16	<span class="position-absolute top-0 start-100 translate-middle p-1 rounded-circle" style="background:#EF4444">
17	</span>
18	</div>
19	<button class="btn btn-dark border-secondary d-inline-flex align-items-center gap-2">
20	Inbox
21	<span class="badge" style="background:rgba(0,255,65,0.15);color:#00FF41">
22	12
23	</span>
24	</button>
25	</div>

1	<div class="flex flex-wrap gap-2 items-center justify-center p-6">
2	<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[11px] font-medium bg-[rgba(0,255,65,0.08)] text-[#00FF41] border border-[rgba(0,255,65,0.15)]">
3	React
4	<button aria-label="Remove React" class="text-sm leading-none opacity-60 hover:opacity-100">
5	×
6	</button>
7	</span>
8	<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[11px] font-medium bg-[rgba(0,255,65,0.08)] text-[#00FF41] border border-[rgba(0,255,65,0.15)]">
9	TypeScript
10	<button aria-label="Remove TypeScript" class="text-sm leading-none opacity-60 hover:opacity-100">
11	×
12	</button>
13	</span>
14	<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[11px] font-medium bg-[rgba(0,255,65,0.08)] text-[#00FF41] border border-[rgba(0,255,65,0.15)]">
15	CSS
16	<button aria-label="Remove CSS" class="text-sm leading-none opacity-60 hover:opacity-100">
17	×
18	</button>
19	</span>
20	<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[11px] font-medium bg-[rgba(0,255,65,0.08)] text-[#00FF41] border border-[rgba(0,255,65,0.15)]">
21	Tailwind
22	<button aria-label="Remove Tailwind" class="text-sm leading-none opacity-60 hover:opacity-100">
23	×
24	</button>
25	</span>
26	<button class="px-2.5 py-1 rounded-md text-[11px] font-medium text-[#525252] border-[1.5px] border-dashed border-[#333] hover:text-[#808080] hover:border-[#525252]">
27	+ Add tag
28	</button>
29	</div>

1	<div class="d-flex flex-wrap gap-2 align-items-center justify-content-center p-4">
2	<span class="badge d-inline-flex align-items-center gap-1" style="background:rgba(0,255,65,0.08);color:#00FF41;border:1px solid rgba(0,255,65,0.15)">
3	React
4	<button aria-label="Remove React" class="btn-close btn-close-white" style="width:10px;height:10px">
5	</button>
6	</span>
7	<span class="badge d-inline-flex align-items-center gap-1" style="background:rgba(0,255,65,0.08);color:#00FF41;border:1px solid rgba(0,255,65,0.15)">
8	TypeScript
9	<button aria-label="Remove TypeScript" class="btn-close btn-close-white" style="width:10px;height:10px">
10	</button>
11	</span>
12	<span class="badge d-inline-flex align-items-center gap-1" style="background:rgba(0,255,65,0.08);color:#00FF41;border:1px solid rgba(0,255,65,0.15)">
13	CSS
14	<button aria-label="Remove CSS" class="btn-close btn-close-white" style="width:10px;height:10px">
15	</button>
16	</span>
17	<span class="badge d-inline-flex align-items-center gap-1" style="background:rgba(0,255,65,0.08);color:#00FF41;border:1px solid rgba(0,255,65,0.15)">
18	Tailwind
19	<button aria-label="Remove Tailwind" class="btn-close btn-close-white" style="width:10px;height:10px">
20	</button>
21	</span>
22	<button class="btn btn-outline-dark btn-sm" style="border-style:dashed;color:#525252">
23	+ Add tag
24	</button>
25	</div>

1	<div class="flex flex-wrap gap-3 justify-center p-6">
2	<span class="px-4 py-1.5 rounded-full text-[11px] font-bold" style="background:linear-gradient(135deg,#00FF41,#00BFFF);color:#0A0A0A">
3	Premium
4	</span>
5	<span class="px-4 py-1.5 rounded-full text-[11px] font-bold bg-[#00FF41] text-[#0A0A0A] shadow-[0_0_12px_rgba(0,255,65,0.4)]">
6	New
7	</span>
8	<span class="px-4 py-1.5 rounded-full text-[11px] font-bold text-[#E0E0E0] bg-white/[0.08] border border-white/10 backdrop-blur">
9	Beta
10	</span>
11	<span class="px-4 py-1.5 rounded-full text-[11px] font-bold bg-transparent text-[#00FF41] border-[1.5px] border-[#00FF41] shadow-[0_0_0_1px_rgba(0,255,65,0.2)]">
12	Pro
13	</span>
14	</div>

1	<div class="d-flex flex-wrap gap-3 justify-content-center p-4">
2	<span class="badge rounded-pill" style="background:linear-gradient(135deg,#00FF41,#00BFFF);color:#0A0A0A">
3	Premium
4	</span>
5	<span class="badge rounded-pill" style="background:#00FF41;color:#0A0A0A;box-shadow:0 0 12px rgba(0,255,65,0.4)">
6	New
7	</span>
8	<span class="badge rounded-pill" style="background:rgba(255,255,255,0.08);color:#E0E0E0;border:1px solid rgba(255,255,255,0.1)">
9	Beta
10	</span>
11	<span class="badge rounded-pill bg-transparent border" style="border-color:#00FF41;color:#00FF41">
12	Pro
13	</span>
14	</div>

1	<div class="flex flex-wrap gap-2.5 justify-center p-6">
2	<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[11px] font-semibold bg-[rgba(0,255,65,0.12)] text-[#00FF41]">
3	<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
4	<polyline points="20 6 9 17 4 12"/>
5	</svg>
6	Verified
7	</span>
8	<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[11px] font-semibold bg-[rgba(234,179,8,0.12)] text-[#EAB308]">
9	<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
10	<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
11	<line x1="12" y1="9" x2="12" y2="13"/>
12	<line x1="12" y1="17" x2="12.01" y2="17"/>
13	</svg>
14	Warning
15	</span>
16	<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[11px] font-semibold bg-[rgba(239,68,68,0.12)] text-[#EF4444]">
17	<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
18	<circle cx="12" cy="12" r="10"/>
19	<line x1="15" y1="9" x2="9" y2="15"/>
20	<line x1="9" y1="9" x2="15" y2="15"/>
21	</svg>
22	Failed
23	</span>
24	</div>

1	<div class="d-flex flex-wrap gap-2 justify-content-center p-4">
2	<span class="badge d-inline-flex align-items-center gap-1" style="background:rgba(0,255,65,0.12);color:#00FF41">
3	<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
4	<polyline points="20 6 9 17 4 12"/>
5	</svg>
6	Verified
7	</span>
8	<span class="badge d-inline-flex align-items-center gap-1" style="background:rgba(234,179,8,0.12);color:#EAB308">
9	<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
10	<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
11	<line x1="12" y1="9" x2="12" y2="13"/>
12	<line x1="12" y1="17" x2="12.01" y2="17"/>
13	</svg>
14	Warning
15	</span>
16	<span class="badge d-inline-flex align-items-center gap-1" style="background:rgba(239,68,68,0.12);color:#EF4444">
17	<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
18	<circle cx="12" cy="12" r="10"/>
19	<line x1="15" y1="9" x2="9" y2="15"/>
20	<line x1="9" y1="9" x2="15" y2="15"/>
21	</svg>
22	Failed
23	</span>
24	</div>