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

$cat docs/tabs.md

updated Recently·18 min read·published

Tabs

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

Introduction

Tabs organize content into switchable sections without leaving the page. This guide covers production-ready tab patterns in plain HTML/CSS, Tailwind CSS, and Bootstrap — including underline, pill, filled, icon, vertical, and card variants, plus keyboard navigation and accessibility.

ℹ

info

Always pair tabs with role="tablist", role="tab", and role="tabpanel". Use aria-selected on tabs and ensure only the active panel is visible to assistive tech.

Underline Tabs

Material-style underline tabs with a sliding indicator and ARIA roles.

underline-tabs

Live

untitled.html

HTML

1	<div class="tabs-root">
2	<div class="tabs-list" role="tablist">
3	<button class="tab active" role="tab" aria-selected="true" data-tab="uprofile">
4	Profile
5	</button>
6	<button class="tab" role="tab" aria-selected="false" data-tab="usecurity">
7	Security
8	</button>
9	<button class="tab" role="tab" aria-selected="false" data-tab="ubilling">
10	Billing
11	</button>
12	<div class="indicator">
13	</div>
14	</div>
15	<div class="tab-panel active" id="uprofile" role="tabpanel">
16	<div class="panel-icon">
17	<svg viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" width="24" height="24">
18	<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
19	<circle cx="12" cy="7" r="4"/>
20	</svg>
21	</div>
22	<h3 class="panel-title">
23	Profile Settings
24	</h3>
25	<p class="panel-desc">
26	Manage your personal information and public profile.
27	</p>
28	</div>
29	<div class="tab-panel" id="usecurity" role="tabpanel">
30	<div class="panel-icon">
31	<svg viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" width="24" height="24">
32	<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
33	<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
34	</svg>
35	</div>
36	<h3 class="panel-title">
37	Security
38	</h3>
39	<p class="panel-desc">
40	Configure password and two-factor authentication.
41	</p>
42	</div>
43	<div class="tab-panel" id="ubilling" role="tabpanel">
44	<div class="panel-icon">
45	<svg viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" width="24" height="24">
46	<rect x="1" y="4" width="22" height="16" rx="2" ry="2"/>
47	<line x1="1" y1="10" x2="23" y2="10"/>
48	</svg>
49	</div>
50	<h3 class="panel-title">
51	Billing
52	</h3>
53	<p class="panel-desc">
54	View invoices and manage subscription plan.
55	</p>
56	</div>
57	</div>

untitled.html

HTML

1	<div class="max-w-lg mx-auto bg-[#111] border border-[#2A2A2A] rounded-xl overflow-hidden">
2	<div class="relative flex bg-[#0A0A0A] border-b border-[#2A2A2A]" data-tablist role="tablist">
3	<button class="flex-1 py-3.5 text-xs font-medium text-[#00FF41] hover:text-[#00FF41] transition-colors" role="tab" aria-selected="true" data-tab="tprofile">
4	Profile
5	</button>
6	<button class="flex-1 py-3.5 text-xs font-medium text-[#808080] hover:text-[#A0A0A0] transition-colors" role="tab" aria-selected="false" data-tab="tsecurity">
7	Security
8	</button>
9	<button class="flex-1 py-3.5 text-xs font-medium text-[#808080] hover:text-[#A0A0A0] transition-colors" role="tab" aria-selected="false" data-tab="tbilling">
10	Billing
11	</button>
12	<div class="absolute bottom-0 h-0.5 bg-[#00FF41] transition-all duration-300 tab-indicator">
13	</div>
14	</div>
15	<div class="p-6 text-center tab-panel block" id="tprofile" role="tabpanel">
16	<div class="flex justify-center mb-3 opacity-90">
17	<svg viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" width="24" height="24">
18	<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
19	<circle cx="12" cy="7" r="4"/>
20	</svg>
21	</div>
22	<h3 class="text-[15px] font-semibold text-[#E0E0E0] mb-1.5">
23	Profile Settings
24	</h3>
25	<p class="text-xs text-[#808080] leading-relaxed max-w-[300px] mx-auto">
26	Manage your personal information and public profile.
27	</p>
28	</div>
29	<div class="p-6 text-center tab-panel hidden" id="tsecurity" role="tabpanel">
30	<div class="flex justify-center mb-3 opacity-90">
31	<svg viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" width="24" height="24">
32	<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
33	<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
34	</svg>
35	</div>
36	<h3 class="text-[15px] font-semibold text-[#E0E0E0] mb-1.5">
37	Security
38	</h3>
39	<p class="text-xs text-[#808080] leading-relaxed max-w-[300px] mx-auto">
40	Configure password and two-factor authentication.
41	</p>
42	</div>
43	<div class="p-6 text-center tab-panel hidden" id="tbilling" role="tabpanel">
44	<div class="flex justify-center mb-3 opacity-90">
45	<svg viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" width="24" height="24">
46	<rect x="1" y="4" width="22" height="16" rx="2" ry="2"/>
47	<line x1="1" y1="10" x2="23" y2="10"/>
48	</svg>
49	</div>
50	<h3 class="text-[15px] font-semibold text-[#E0E0E0] mb-1.5">
51	Billing
52	</h3>
53	<p class="text-xs text-[#808080] leading-relaxed max-w-[300px] mx-auto">
54	View invoices and manage subscription plan.
55	</p>
56	</div>
57	</div>

untitled.html

HTML

1	<div class="card bg-black border-secondary mx-auto" style="max-width:520px">
2	<ul class="nav nav-tabs border-secondary bg-dark" id="underlineTab" role="tablist">
3	<li class="nav-item" role="presentation">
4	<button class="nav-link active fw-medium border-0" id="bprofile-tab" data-bs-toggle="tab" data-bs-target="#bprofile" type="button" role="tab" aria-selected="true" style="color:#00FF41;background:transparent;border-bottom:2px solid #00FF41">
5	Profile
6	</button>
7	</li>
8	<li class="nav-item" role="presentation">
9	<button class="nav-link fw-medium border-0 text-secondary" id="bsecurity-tab" data-bs-toggle="tab" data-bs-target="#bsecurity" type="button" role="tab" aria-selected="false" style="background:transparent">
10	Security
11	</button>
12	</li>
13	<li class="nav-item" role="presentation">
14	<button class="nav-link fw-medium border-0 text-secondary" id="bbilling-tab" data-bs-toggle="tab" data-bs-target="#bbilling" type="button" role="tab" aria-selected="false" style="background:transparent">
15	Billing
16	</button>
17	</li>
18	</ul>
19	<div class="tab-content p-4 text-center">
20	<div class="tab-pane fade show active" id="bprofile" role="tabpanel">
21	<div class="d-flex justify-content-center mb-3">
22	<svg viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" width="24" height="24">
23	<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
24	<circle cx="12" cy="7" r="4"/>
25	</svg>
26	</div>
27	<h5 class="text-light">
28	Profile Settings
29	</h5>
30	<p class="text-secondary small mb-0">
31	Manage your personal information and public profile.
32	</p>
33	</div>
34	<div class="tab-pane fade" id="bsecurity" role="tabpanel">
35	<div class="d-flex justify-content-center mb-3">
36	<svg viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" width="24" height="24">
37	<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
38	<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
39	</svg>
40	</div>
41	<h5 class="text-light">
42	Security
43	</h5>
44	<p class="text-secondary small mb-0">
45	Configure password and two-factor authentication.
46	</p>
47	</div>
48	<div class="tab-pane fade" id="bbilling" role="tabpanel">
49	<div class="d-flex justify-content-center mb-3">
50	<svg viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" width="24" height="24">
51	<rect x="1" y="4" width="22" height="16" rx="2" ry="2"/>
52	<line x1="1" y1="10" x2="23" y2="10"/>
53	</svg>
54	</div>
55	<h5 class="text-light">
56	Billing
57	</h5>
58	<p class="text-secondary small mb-0">
59	View invoices and manage subscription plan.
60	</p>
61	</div>
62	</div>
63	</div>

preview

Pill Tabs

Segmented pill tabs with icons — ideal for settings pages and compact filters.

pill-tabs

Live

untitled.html

HTML

1	<div class="tabs-root">
2	<div class="pill-list" role="tablist">
3	<button class="pill active" role="tab" aria-selected="true" data-tab="ppreview">
4	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
5	<rect x="3" y="3" width="7" height="7"/>
6	<rect x="14" y="3" width="7" height="7"/>
7	<rect x="14" y="14" width="7" height="7"/>
8	<rect x="3" y="14" width="7" height="7"/>
9	</svg>
10	Preview
11	</button>
12	<button class="pill" role="tab" aria-selected="false" data-tab="pcode">
13	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
14	<polyline points="16 18 22 12 16 6"/>
15	<polyline points="8 6 2 12 8 18"/>
16	</svg>
17	Code
18	</button>
19	<button class="pill" role="tab" aria-selected="false" data-tab="poptions">
20	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
21	<circle cx="12" cy="12" r="3"/>
22	<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
23	</svg>
24	Options
25	</button>
26	</div>
27	<div class="pill-panel active" id="ppreview" role="tabpanel">
28	<div class="preview-box">
29	<div class="preview-avatar">
30	</div>
31	<div class="preview-lines">
32	<div class="preview-line" style="width:60%">
33	</div>
34	<div class="preview-line" style="width:80%">
35	</div>
36	<div class="preview-line" style="width:40%">
37	</div>
38	</div>
39	</div>
40	</div>
41	<div class="pill-panel" id="pcode" role="tabpanel">
42	<pre class="code-block">
43	<span class="code-comment">
44	// main.js
45	</span>
46	<span class="code-line">
47	<span class="code-kw">
48	const
49	</span>
50	app =
51	<span class="code-fn">
52	initialize
53	</span>
54	()
55	</span>
56	<span class="code-line">
57	app.
58	<span class="code-fn">
59	run
60	</span>
61	({ mode:
62	<span class="code-str">
63	'dev'
64	</span>
65	})
66	</span>
67	</pre>
68	</div>
69	<div class="pill-panel" id="poptions" role="tabpanel">
70	<div class="toggle-list">
71	<label class="toggle-row">
72	<span>
73	Dark mode
74	</span>
75	<input type="checkbox" checked/>
76	</label>
77	<label class="toggle-row">
78	<span>
79	Auto-save
80	</span>
81	<input type="checkbox"/>
82	</label>
83	</div>
84	</div>
85	</div>

untitled.css

CSS

1	.tabs-root {
2	max-width:480px;
3	margin:0 auto;
4	background:#111;
5	border:1px solid #2A2A2A;
6	border-radius:10px;
7	overflow:hidden
8	}
9	.pill-list {
10	display:flex;
11	gap:4px;
12	padding:12px 12px 0;
13	background:#0A0A0A
14	}
15	.pill {
16	display:flex;
17	align-items:center;
18	gap:6px;
19	padding:8px 16px;
20	border-radius:8px;
21	font-size:11px;
22	font-weight:500;
23	font-family:system-ui,
24	sans-serif;
25	color:#808080;
26	background:transparent;
27	border:none;
28	cursor:pointer;
29	transition:all .2s
30	}
31	.pill:hover {
32	color:#A0A0A0;
33	background:rgba(255,
34	255,
35	255,
36	.03)
37	}
38	.pill.active {
39	color:#00FF41;
40	background:#111
41	}
42	.pill-panel {
43	display:none;
44	padding:20px
45	}
46	.pill-panel.active {
47	display:block
48	}
49	.preview-box {
50	display:flex;
51	align-items:center;
52	gap:16px;
53	padding:16px;
54	background:#0A0A0A;
55	border-radius:8px;
56	border:1px solid #2A2A2A
57	}
58	.preview-avatar {
59	width:40px;
60	height:40px;
61	border-radius:50%;
62	background:rgba(0,
63	255,
64	65,
65	.15);
66	border:2px solid rgba(0,
67	255,
68	65,
69	.3)
70	}
71	.preview-lines {
72	flex:1;
73	display:flex;
74	flex-direction:column;
75	gap:8px
76	}
77	.preview-line {
78	height:8px;
79	border-radius:4px;
80	background:#2A2A2A
81	}
82	.code-block {
83	display:flex;
84	flex-direction:column;
85	gap:6px;
86	font-size:12px;
87	font-family:monospace;
88	background:#0A0A0A;
89	padding:16px;
90	border-radius:8px;
91	border:1px solid #2A2A2A
92	}
93	.code-comment {
94	color:#6A9955
95	}
96	.code-line {
97	color:#D4D4D4
98	}
99	.code-kw {
100	color:#569CD6
101	}
102	.code-fn {
103	color:#DCDCAA
104	}
105	.code-str {
106	color:#CE9178
107	}
108	.toggle-list {
109	display:flex;
110	flex-direction:column;
111	gap:8px
112	}
113	.toggle-row {
114	display:flex;
115	align-items:center;
116	justify-content:space-between;
117	padding:10px 12px;
118	font-size:12px;
119	color:#C0C0C0;
120	font-family:system-ui,
121	sans-serif;
122	background:#0A0A0A;
123	border-radius:6px;
124	border:1px solid #2A2A2A
125	}
126	.toggle-row input[type=checkbox] {
127	width:34px;
128	height:18px;
129	appearance:none;
130	background:#333;
131	border-radius:9px;
132	position:relative;
133	cursor:pointer;
134	transition:background .2s
135	}
136	.toggle-row input[type=checkbox]:checked {
137	background:#00FF41
138	}
139	.toggle-row input[type=checkbox]::after {
140	content:'';
141	position:absolute;
142	top:2px;
143	left:2px;
144	width:14px;
145	height:14px;
146	border-radius:50%;
147	background:#fff;
148	transition:transform .2s
149	}
150	.toggle-row input[type=checkbox]:checked::after {
151	transform:translateX(16px)
152	}

untitled.html

HTML

1	<div class="max-w-md mx-auto bg-[#111] border border-[#2A2A2A] rounded-xl overflow-hidden">
2	<div class="flex gap-1 p-3 bg-[#0A0A0A]" data-pilllist role="tablist">
3	<button class="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-[11px] font-medium text-[#00FF41] bg-[#111] transition-colors" role="tab" aria-selected="true" data-tab="pvpreview">
4	<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
5	<rect x="3" y="3" width="7" height="7"/>
6	<rect x="14" y="3" width="7" height="7"/>
7	<rect x="14" y="14" width="7" height="7"/>
8	<rect x="3" y="14" width="7" height="7"/>
9	</svg>
10	Preview
11	</button>
12	<button class="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-[11px] font-medium text-[#808080] hover:text-[#A0A0A0] hover:bg-white/[0.03] transition-colors" role="tab" aria-selected="false" data-tab="pvcode">
13	<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
14	<polyline points="16 18 22 12 16 6"/>
15	<polyline points="8 6 2 12 8 18"/>
16	</svg>
17	Code
18	</button>
19	<button class="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-[11px] font-medium text-[#808080] hover:text-[#A0A0A0] hover:bg-white/[0.03] transition-colors" role="tab" aria-selected="false" data-tab="pvoptions">
20	<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
21	<circle cx="12" cy="12" r="3"/>
22	<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
23	</svg>
24	Options
25	</button>
26	</div>
27	<div class="p-5 pill-panel block" id="pvpreview" role="tabpanel">
28	<div class="flex items-center gap-4 p-4 bg-[#0A0A0A] border border-[#2A2A2A] rounded-lg">
29	<div class="w-10 h-10 rounded-full bg-[#00FF41]/15 border-2 border-[#00FF41]/30">
30	</div>
31	<div class="flex-1 flex flex-col gap-2">
32	<div class="h-2 rounded bg-[#2A2A2A] w-[60%]">
33	</div>
34	<div class="h-2 rounded bg-[#2A2A2A] w-[80%]">
35	</div>
36	<div class="h-2 rounded bg-[#2A2A2A] w-[40%]">
37	</div>
38	</div>
39	</div>
40	</div>
41	<div class="p-5 pill-panel hidden" id="pvcode" role="tabpanel">
42	<pre class="flex flex-col gap-1.5 text-xs font-mono bg-[#0A0A0A] p-4 rounded-lg border border-[#2A2A2A]">
43	<span class="text-[#6A9955]">
44	// main.js
45	</span>
46	<span>
47	<span class="text-[#569CD6]">
48	const
49	</span>
50	app =
51	<span class="text-[#DCDCAA]">
52	initialize
53	</span>
54	()
55	</span>
56	<span>
57	app.
58	<span class="text-[#DCDCAA]">
59	run
60	</span>
61	({ mode:
62	<span class="text-[#CE9178]">
63	'dev'
64	</span>
65	})
66	</span>
67	</pre>
68	</div>
69	<div class="p-5 pill-panel hidden" id="pvoptions" role="tabpanel">
70	<div class="flex flex-col gap-2">
71	<label class="flex items-center justify-between p-2.5 text-xs text-[#C0C0C0] bg-[#0A0A0A] border border-[#2A2A2A] rounded-md">
72	<span>
73	Dark mode
74	</span>
75	<input type="checkbox" checked class="accent-[#00FF41]"/>
76	</label>
77	<label class="flex items-center justify-between p-2.5 text-xs text-[#C0C0C0] bg-[#0A0A0A] border border-[#2A2A2A] rounded-md">
78	<span>
79	Auto-save
80	</span>
81	<input type="checkbox" class="accent-[#00FF41]"/>
82	</label>
83	</div>
84	</div>
85	</div>

untitled.html

HTML

1	<div class="card bg-black border-secondary mx-auto" style="max-width:480px">
2	<div class="card-header bg-dark border-secondary">
3	<ul class="nav nav-pills" id="pillTab" role="tablist">
4	<li class="nav-item" role="presentation">
5	<button class="nav-link active fw-medium" style="color:#0A0A0A;background:#00FF41" id="bp-preview-tab" data-bs-toggle="pill" data-bs-target="#bp-preview" type="button" role="tab" aria-selected="true">
6	<svg class="me-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
7	<rect x="3" y="3" width="7" height="7"/>
8	<rect x="14" y="3" width="7" height="7"/>
9	<rect x="14" y="14" width="7" height="7"/>
10	<rect x="3" y="14" width="7" height="7"/>
11	</svg>
12	Preview
13	</button>
14	</li>
15	<li class="nav-item" role="presentation">
16	<button class="nav-link fw-medium text-secondary" id="bp-code-tab" data-bs-toggle="pill" data-bs-target="#bp-code" type="button" role="tab" aria-selected="false">
17	Code
18	</button>
19	</li>
20	<li class="nav-item" role="presentation">
21	<button class="nav-link fw-medium text-secondary" id="bp-options-tab" data-bs-toggle="pill" data-bs-target="#bp-options" type="button" role="tab" aria-selected="false">
22	Options
23	</button>
24	</li>
25	</ul>
26	</div>
27	<div class="card-body tab-content">
28	<div class="tab-pane fade show active" id="bp-preview" role="tabpanel">
29	<div class="d-flex align-items-center gap-3 p-3 bg-dark border border-secondary rounded">
30	<div class="rounded-circle" style="width:40px;height:40px;background:rgba(0,255,65,.15);border:2px solid rgba(0,255,65,.3)">
31	</div>
32	<div class="flex-grow-1 d-flex flex-column gap-2">
33	<div class="rounded" style="height:8px;background:#2A2A2A;width:60%">
34	</div>
35	<div class="rounded" style="height:8px;background:#2A2A2A;width:80%">
36	</div>
37	<div class="rounded" style="height:8px;background:#2A2A2A;width:40%">
38	</div>
39	</div>
40	</div>
41	</div>
42	<div class="tab-pane fade" id="bp-code" role="tabpanel">
43	<pre class="small p-3 bg-dark border border-secondary rounded text-secondary mb-0">
44	<span style="color:#6A9955">
45	// main.js
46	</span>
47	<span style="color:#569CD6">
48	const
49	</span>
50	app = initialize()
51	app.run({ mode:
52	<span style="color:#CE9178">
53	'dev'
54	</span>
55	})
56	</pre>
57	</div>
58	<div class="tab-pane fade" id="bp-options" role="tabpanel">
59	<div class="d-flex flex-column gap-2">
60	<label class="d-flex align-items-center justify-content-between p-2 bg-dark border border-secondary rounded text-secondary small mb-0">
61	<span>
62	Dark mode
63	</span>
64	<input type="checkbox" checked/>
65	</label>
66	<label class="d-flex align-items-center justify-content-between p-2 bg-dark border border-secondary rounded text-secondary small mb-0">
67	<span>
68	Auto-save
69	</span>
70	<input type="checkbox"/>
71	</label>
72	</div>
73	</div>
74	</div>
75	</div>

preview

Filled Tabs

Solid background tabs with high-contrast active states — useful for dashboards and toolbars.

filled-tabs

Live

untitled.html

HTML

1	<div class="tabs-root">
2	<div class="filled-list" role="tablist">
3	<button class="filled-tab active" role="tab" aria-selected="true" data-tab="fdash">
4	Dashboard
5	</button>
6	<button class="filled-tab" role="tab" aria-selected="false" data-tab="frepo">
7	Repositories
8	</button>
9	<button class="filled-tab" role="tab" aria-selected="false" data-tab="fdeploy">
10	Deployments
11	</button>
12	</div>
13	<div class="filled-panel active" id="fdash" role="tabpanel">
14	<div class="stat-grid">
15	<div class="stat">
16	<span class="stat-value">
17	24
18	</span>
19	<span class="stat-label">
20	Builds
21	</span>
22	</div>
23	<div class="stat">
24	<span class="stat-value">
25	98%
26	</span>
27	<span class="stat-label">
28	Uptime
29	</span>
30	</div>
31	<div class="stat">
32	<span class="stat-value">
33	3
34	</span>
35	<span class="stat-label">
36	Alerts
37	</span>
38	</div>
39	</div>
40	</div>
41	<div class="filled-panel" id="frepo" role="tabpanel">
42	<p class="panel-desc">
43	12 public and 4 private repositories synced.
44	</p>
45	</div>
46	<div class="filled-panel" id="fdeploy" role="tabpanel">
47	<p class="panel-desc">
48	Last deployment completed in 42 seconds.
49	</p>
50	</div>
51	</div>

untitled.html

HTML

1	<div class="max-w-lg mx-auto bg-[#111] border border-[#2A2A2A] rounded-xl overflow-hidden">
2	<div class="flex gap-1 p-1.5 bg-[#0A0A0A] border-b border-[#2A2A2A]" data-filledlist role="tablist">
3	<button class="flex-1 py-2.5 rounded-md text-[11px] font-semibold text-[#0A0A0A] bg-[#00FF41] transition-colors" role="tab" aria-selected="true" data-tab="fvdash">
4	Dashboard
5	</button>
6	<button class="flex-1 py-2.5 rounded-md text-[11px] font-semibold text-[#808080] hover:text-[#A0A0A0] hover:bg-white/[0.03] transition-colors" role="tab" aria-selected="false" data-tab="fvrepo">
7	Repositories
8	</button>
9	<button class="flex-1 py-2.5 rounded-md text-[11px] font-semibold text-[#808080] hover:text-[#A0A0A0] hover:bg-white/[0.03] transition-colors" role="tab" aria-selected="false" data-tab="fvdeploy">
10	Deployments
11	</button>
12	</div>
13	<div class="p-6 text-center filled-panel block" id="fvdash" role="tabpanel">
14	<div class="grid grid-cols-3 gap-3">
15	<div class="bg-[#0A0A0A] border border-[#2A2A2A] rounded-lg p-4 flex flex-col gap-1">
16	<span class="text-xl font-bold text-[#00FF41]">
17	24
18	</span>
19	<span class="text-[10px] text-[#808080] uppercase tracking-wider">
20	Builds
21	</span>
22	</div>
23	<div class="bg-[#0A0A0A] border border-[#2A2A2A] rounded-lg p-4 flex flex-col gap-1">
24	<span class="text-xl font-bold text-[#00FF41]">
25	98%
26	</span>
27	<span class="text-[10px] text-[#808080] uppercase tracking-wider">
28	Uptime
29	</span>
30	</div>
31	<div class="bg-[#0A0A0A] border border-[#2A2A2A] rounded-lg p-4 flex flex-col gap-1">
32	<span class="text-xl font-bold text-[#00FF41]">
33	3
34	</span>
35	<span class="text-[10px] text-[#808080] uppercase tracking-wider">
36	Alerts
37	</span>
38	</div>
39	</div>
40	</div>
41	<div class="p-6 text-center filled-panel hidden" id="fvrepo" role="tabpanel">
42	<p class="text-xs text-[#808080]">
43	12 public and 4 private repositories synced.
44	</p>
45	</div>
46	<div class="p-6 text-center filled-panel hidden" id="fvdeploy" role="tabpanel">
47	<p class="text-xs text-[#808080]">
48	Last deployment completed in 42 seconds.
49	</p>
50	</div>
51	</div>

untitled.html

HTML

1	<div class="card bg-black border-secondary mx-auto" style="max-width:520px">
2	<div class="card-header bg-dark border-secondary p-2">
3	<ul class="nav nav-pills nav-fill" id="filledTab" role="tablist">
4	<li class="nav-item" role="presentation">
5	<button class="nav-link active fw-semibold small" style="color:#0A0A0A;background:#00FF41" id="bf-dash-tab" data-bs-toggle="tab" data-bs-target="#bf-dash" type="button" role="tab" aria-selected="true">
6	Dashboard
7	</button>
8	</li>
9	<li class="nav-item" role="presentation">
10	<button class="nav-link fw-semibold small text-secondary" id="bf-repo-tab" data-bs-toggle="tab" data-bs-target="#bf-repo" type="button" role="tab" aria-selected="false">
11	Repositories
12	</button>
13	</li>
14	<li class="nav-item" role="presentation">
15	<button class="nav-link fw-semibold small text-secondary" id="bf-deploy-tab" data-bs-toggle="tab" data-bs-target="#bf-deploy" type="button" role="tab" aria-selected="false">
16	Deployments
17	</button>
18	</li>
19	</ul>
20	</div>
21	<div class="card-body tab-content text-center">
22	<div class="tab-pane fade show active" id="bf-dash" role="tabpanel">
23	<div class="row g-3">
24	<div class="col-4">
25	<div class="p-3 bg-dark border border-secondary rounded">
26	<div class="h4 mb-1" style="color:#00FF41">
27	24
28	</div>
29	<div class="small text-secondary">
30	Builds
31	</div>
32	</div>
33	</div>
34	<div class="col-4">
35	<div class="p-3 bg-dark border border-secondary rounded">
36	<div class="h4 mb-1" style="color:#00FF41">
37	98%
38	</div>
39	<div class="small text-secondary">
40	Uptime
41	</div>
42	</div>
43	</div>
44	<div class="col-4">
45	<div class="p-3 bg-dark border border-secondary rounded">
46	<div class="h4 mb-1" style="color:#00FF41">
47	3
48	</div>
49	<div class="small text-secondary">
50	Alerts
51	</div>
52	</div>
53	</div>
54	</div>
55	</div>
56	<div class="tab-pane fade" id="bf-repo" role="tabpanel">
57	<p class="text-secondary small mb-0">
58	12 public and 4 private repositories synced.
59	</p>
60	</div>
61	<div class="tab-pane fade" id="bf-deploy" role="tabpanel">
62	<p class="text-secondary small mb-0">
63	Last deployment completed in 42 seconds.
64	</p>
65	</div>
66	</div>
67	</div>

preview

Icon Tabs

Compact icon-only tabs and icon-plus-label tabs for toolbars and mobile navigation.

icon-tabs

Live

untitled.html

HTML

1	<div class="tabs-root">
2	<div class="icon-list" role="tablist">
3	<button class="icon-tab active" role="tab" aria-selected="true" aria-label="Home" data-tab="ihome">
4	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
5	<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
6	<polyline points="9 22 9 12 15 12 15 22"/>
7	</svg>
8	<span>
9	Home
10	</span>
11	</button>
12	<button class="icon-tab" role="tab" aria-selected="false" aria-label="Search" data-tab="isearch">
13	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
14	<circle cx="11" cy="11" r="8"/>
15	<line x1="21" y1="21" x2="16.65" y2="16.65"/>
16	</svg>
17	<span>
18	Search
19	</span>
20	</button>
21	<button class="icon-tab" role="tab" aria-selected="false" aria-label="Notifications" data-tab="inotif">
22	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
23	<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
24	<path d="M13.73 21a2 2 0 0 1-3.46 0"/>
25	</svg>
26	<span>
27	Alerts
28	</span>
29	</button>
30	</div>
31	<div class="icon-panel active" id="ihome" role="tabpanel">
32	<p class="panel-desc">
33	Home dashboard overview.
34	</p>
35	</div>
36	<div class="icon-panel" id="isearch" role="tabpanel">
37	<p class="panel-desc">
38	Search across projects and files.
39	</p>
40	</div>
41	<div class="icon-panel" id="inotif" role="tabpanel">
42	<p class="panel-desc">
43	Notifications and mentions.
44	</p>
45	</div>
46	</div>

untitled.html

HTML

1	<div class="max-w-md mx-auto bg-[#111] border border-[#2A2A2A] rounded-xl overflow-hidden">
2	<div class="flex justify-center gap-2 p-4 bg-[#0A0A0A] border-b border-[#2A2A2A]" data-iconlist role="tablist">
3	<button class="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-lg text-[11px] font-medium text-[#00FF41] bg-[#00FF41]/8 transition-colors" role="tab" aria-selected="true" aria-label="Home" data-tab="ivhome">
4	<svg class="w-[18px] h-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
5	<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
6	<polyline points="9 22 9 12 15 12 15 22"/>
7	</svg>
8	<span>
9	Home
10	</span>
11	</button>
12	<button class="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-lg text-[11px] font-medium text-[#808080] hover:text-[#A0A0A0] hover:bg-white/[0.03] transition-colors" role="tab" aria-selected="false" aria-label="Search" data-tab="ivsearch">
13	<svg class="w-[18px] h-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
14	<circle cx="11" cy="11" r="8"/>
15	<line x1="21" y1="21" x2="16.65" y2="16.65"/>
16	</svg>
17	<span>
18	Search
19	</span>
20	</button>
21	<button class="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-lg text-[11px] font-medium text-[#808080] hover:text-[#A0A0A0] hover:bg-white/[0.03] transition-colors" role="tab" aria-selected="false" aria-label="Notifications" data-tab="ivnotif">
22	<svg class="w-[18px] h-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
23	<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
24	<path d="M13.73 21a2 2 0 0 1-3.46 0"/>
25	</svg>
26	<span>
27	Alerts
28	</span>
29	</button>
30	</div>
31	<div class="p-6 text-center icon-panel block" id="ivhome" role="tabpanel">
32	<p class="text-xs text-[#808080]">
33	Home dashboard overview.
34	</p>
35	</div>
36	<div class="p-6 text-center icon-panel hidden" id="ivsearch" role="tabpanel">
37	<p class="text-xs text-[#808080]">
38	Search across projects and files.
39	</p>
40	</div>
41	<div class="p-6 text-center icon-panel hidden" id="ivnotif" role="tabpanel">
42	<p class="text-xs text-[#808080]">
43	Notifications and mentions.
44	</p>
45	</div>
46	</div>

untitled.html

HTML

1	<div class="card bg-black border-secondary mx-auto" style="max-width:420px">
2	<div class="card-header bg-dark border-secondary">
3	<ul class="nav nav-pills justify-content-center gap-2" id="iconTab" role="tablist">
4	<li class="nav-item" role="presentation">
5	<button class="nav-link active fw-medium d-inline-flex align-items-center gap-1 small" style="color:#00FF41;background:rgba(0,255,65,.08)" id="bi-home-tab" data-bs-toggle="pill" data-bs-target="#bi-home" type="button" role="tab" aria-selected="true">
6	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
7	<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
8	<polyline points="9 22 9 12 15 12 15 22"/>
9	</svg>
10	Home
11	</button>
12	</li>
13	<li class="nav-item" role="presentation">
14	<button class="nav-link fw-medium d-inline-flex align-items-center gap-1 small text-secondary" id="bi-search-tab" data-bs-toggle="pill" data-bs-target="#bi-search" type="button" role="tab" aria-selected="false">
15	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
16	<circle cx="11" cy="11" r="8"/>
17	<line x1="21" y1="21" x2="16.65" y2="16.65"/>
18	</svg>
19	Search
20	</button>
21	</li>
22	<li class="nav-item" role="presentation">
23	<button class="nav-link fw-medium d-inline-flex align-items-center gap-1 small text-secondary" id="bi-notif-tab" data-bs-toggle="pill" data-bs-target="#bi-notif" type="button" role="tab" aria-selected="false">
24	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
25	<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
26	<path d="M13.73 21a2 2 0 0 1-3.46 0"/>
27	</svg>
28	Alerts
29	</button>
30	</li>
31	</ul>
32	</div>
33	<div class="card-body tab-content text-center">
34	<div class="tab-pane fade show active" id="bi-home" role="tabpanel">
35	<p class="text-secondary small mb-0">
36	Home dashboard overview.
37	</p>
38	</div>
39	<div class="tab-pane fade" id="bi-search" role="tabpanel">
40	<p class="text-secondary small mb-0">
41	Search across projects and files.
42	</p>
43	</div>
44	<div class="tab-pane fade" id="bi-notif" role="tabpanel">
45	<p class="text-secondary small mb-0">
46	Notifications and mentions.
47	</p>
48	</div>
49	</div>
50	</div>

preview

Vertical Tabs

Sidebar-style vertical tabs for settings panels and complex navigation layouts.

vertical-tabs

Live

untitled.html

HTML

1	<div class="tabs-root">
2	<div class="v-list" role="tablist">
3	<button class="v-tab active" role="tab" aria-selected="true" data-tab="vgeneral">
4	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
5	<path d="M12 20h9"/>
6	<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
7	</svg>
8	General
9	</button>
10	<button class="v-tab" role="tab" aria-selected="false" data-tab="vappearance">
11	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
12	<circle cx="12" cy="12" r="3"/>
13	<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
14	</svg>
15	Appearance
16	</button>
17	<button class="v-tab" role="tab" aria-selected="false" data-tab="vadvanced">
18	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
19	<circle cx="12" cy="12" r="3"/>
20	<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
21	</svg>
22	Advanced
23	</button>
24	</div>
25	<div class="v-body">
26	<div class="v-panel active" id="vgeneral" role="tabpanel">
27	<h3>
28	General Settings
29	</h3>
30	<label class="v-field">
31	<span>
32	Site Name
33	</span>
34	<input type="text" value="My App"/>
35	</label>
36	<label class="v-field">
37	<span>
38	Language
39	</span>
40	<select>
41	<option>
42	English
43	</option>
44	<option>
45	Spanish
46	</option>
47	</select>
48	</label>
49	</div>
50	<div class="v-panel" id="vappearance" role="tabpanel">
51	<h3>
52	Appearance
53	</h3>
54	<label class="v-field">
55	<span>
56	Theme
57	</span>
58	<select>
59	<option>
60	Dark
61	</option>
62	<option>
63	Light
64	</option>
65	</select>
66	</label>
67	<p class="v-desc">
68	Preview updates instantly.
69	</p>
70	</div>
71	<div class="v-panel" id="vadvanced" role="tabpanel">
72	<h3>
73	Advanced
74	</h3>
75	<label class="v-field">
76	<span>
77	API Key
78	</span>
79	<input type="password" value="sk-••••"/>
80	</label>
81	<p class="v-desc">
82	Rotate keys regularly.
83	</p>
84	</div>
85	</div>
86	</div>

untitled.html

HTML

1	<div class="max-w-xl mx-auto flex bg-[#111] border border-[#2A2A2A] rounded-xl overflow-hidden min-h-[220px]" data-vtabs>
2	<div class="flex flex-col gap-0.5 p-2.5 bg-[#0A0A0A] border-r border-[#2A2A2A] min-w-[150px]" role="tablist">
3	<button class="flex items-center gap-2 px-3.5 py-2.5 rounded-md text-xs font-medium text-[#00FF41] bg-[#00FF41]/5 transition-colors text-left" role="tab" aria-selected="true" data-tab="vvgeneral">
4	<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
5	<path d="M12 20h9"/>
6	<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
7	</svg>
8	General
9	</button>
10	<button class="flex items-center gap-2 px-3.5 py-2.5 rounded-md text-xs font-medium text-[#808080] hover:text-[#E0E0E0] hover:bg-white/[0.03] transition-colors text-left" role="tab" aria-selected="false" data-tab="vvappearance">
11	<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
12	<circle cx="12" cy="12" r="3"/>
13	<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
14	</svg>
15	Appearance
16	</button>
17	<button class="flex items-center gap-2 px-3.5 py-2.5 rounded-md text-xs font-medium text-[#808080] hover:text-[#E0E0E0] hover:bg-white/[0.03] transition-colors text-left" role="tab" aria-selected="false" data-tab="vvadvanced">
18	<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
19	<circle cx="12" cy="12" r="3"/>
20	<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
21	</svg>
22	Advanced
23	</button>
24	</div>
25	<div class="flex-1 p-5">
26	<div class="v-panel block" id="vvgeneral" role="tabpanel">
27	<h3 class="text-sm font-semibold text-[#E0E0E0] mb-3.5">
28	General Settings
29	</h3>
30	<label class="flex flex-col gap-1 mb-3">
31	<span class="text-[10px] text-[#666] uppercase tracking-wider">
32	Site Name
33	</span>
34	<input type="text" value="My App" class="px-2.5 py-2 rounded-md border border-[#2A2A2A] bg-[#0A0A0A] text-[#E0E0E0] text-xs"/>
35	</label>
36	<label class="flex flex-col gap-1">
37	<span class="text-[10px] text-[#666] uppercase tracking-wider">
38	Language
39	</span>
40	<select class="px-2.5 py-2 rounded-md border border-[#2A2A2A] bg-[#0A0A0A] text-[#E0E0E0] text-xs">
41	<option>
42	English
43	</option>
44	<option>
45	Spanish
46	</option>
47	</select>
48	</label>
49	</div>
50	<div class="v-panel hidden" id="vvappearance" role="tabpanel">
51	<h3 class="text-sm font-semibold text-[#E0E0E0] mb-3.5">
52	Appearance
53	</h3>
54	<label class="flex flex-col gap-1 mb-3">
55	<span class="text-[10px] text-[#666] uppercase tracking-wider">
56	Theme
57	</span>
58	<select class="px-2.5 py-2 rounded-md border border-[#2A2A2A] bg-[#0A0A0A] text-[#E0E0E0] text-xs">
59	<option>
60	Dark
61	</option>
62	<option>
63	Light
64	</option>
65	</select>
66	</label>
67	<p class="text-xs text-[#808080] leading-relaxed">
68	Preview updates instantly.
69	</p>
70	</div>
71	<div class="v-panel hidden" id="vvadvanced" role="tabpanel">
72	<h3 class="text-sm font-semibold text-[#E0E0E0] mb-3.5">
73	Advanced
74	</h3>
75	<label class="flex flex-col gap-1 mb-3">
76	<span class="text-[10px] text-[#666] uppercase tracking-wider">
77	API Key
78	</span>
79	<input type="password" value="sk-••••" class="px-2.5 py-2 rounded-md border border-[#2A2A2A] bg-[#0A0A0A] text-[#E0E0E0] text-xs"/>
80	</label>
81	<p class="text-xs text-[#808080] leading-relaxed">
82	Rotate keys regularly.
83	</p>
84	</div>
85	</div>
86	</div>

untitled.html

HTML

1	<div class="card bg-black border-secondary mx-auto" style="max-width:560px">
2	<div class="row g-0">
3	<div class="col-3 bg-dark border-end border-secondary p-2">
4	<div class="nav flex-column nav-pills" id="v-tab" role="tablist">
5	<button class="nav-link active d-flex align-items-center gap-2 small" style="color:#00FF41;background:rgba(0,255,65,.05)" id="bv-general-tab" data-bs-toggle="pill" data-bs-target="#bv-general" type="button" role="tab" aria-selected="true">
6	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
7	<path d="M12 20h9"/>
8	<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
9	</svg>
10	General
11	</button>
12	<button class="nav-link d-flex align-items-center gap-2 small text-secondary" id="bv-appearance-tab" data-bs-toggle="pill" data-bs-target="#bv-appearance" type="button" role="tab" aria-selected="false">
13	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
14	<circle cx="12" cy="12" r="3"/>
15	<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
16	</svg>
17	Appearance
18	</button>
19	<button class="nav-link d-flex align-items-center gap-2 small text-secondary" id="bv-advanced-tab" data-bs-toggle="pill" data-bs-target="#bv-advanced" type="button" role="tab" aria-selected="false">
20	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
21	<circle cx="12" cy="12" r="3"/>
22	<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
23	</svg>
24	Advanced
25	</button>
26	</div>
27	</div>
28	<div class="col-9">
29	<div class="tab-content p-4">
30	<div class="tab-pane fade show active" id="bv-general" role="tabpanel">
31	<h6 class="text-light">
32	General Settings
33	</h6>
34	<label class="d-block small text-secondary mb-1">
35	Site Name
36	</label>
37	<input type="text" class="form-control form-control-sm bg-dark border-secondary text-light mb-3" value="My App"/>
38	<label class="d-block small text-secondary mb-1">
39	Language
40	</label>
41	<select class="form-select form-select-sm bg-dark border-secondary text-light">
42	<option>
43	English
44	</option>
45	<option>
46	Spanish
47	</option>
48	</select>
49	</div>
50	<div class="tab-pane fade" id="bv-appearance" role="tabpanel">
51	<h6 class="text-light">
52	Appearance
53	</h6>
54	<label class="d-block small text-secondary mb-1">
55	Theme
56	</label>
57	<select class="form-select form-select-sm bg-dark border-secondary text-light mb-2">
58	<option>
59	Dark
60	</option>
61	<option>
62	Light
63	</option>
64	</select>
65	<p class="text-secondary small mb-0">
66	Preview updates instantly.
67	</p>
68	</div>
69	<div class="tab-pane fade" id="bv-advanced" role="tabpanel">
70	<h6 class="text-light">
71	Advanced
72	</h6>
73	<label class="d-block small text-secondary mb-1">
74	API Key
75	</label>
76	<input type="password" class="form-control form-control-sm bg-dark border-secondary text-light mb-2" value="sk-••••"/>
77	<p class="text-secondary small mb-0">
78	Rotate keys regularly.
79	</p>
80	</div>
81	</div>
82	</div>
83	</div>
84	</div>

preview

Card Tabs

Tabs embedded inside a card component with rich content panels and clear visual separation.

card-tabs

Live

untitled.html

HTML

1	<div class="card-root">
2	<div class="card-header">
3	<h2>
4	Project Settings
5	</h2>
6	<div class="card-tabs" role="tablist">
7	<button class="card-tab active" role="tab" aria-selected="true" data-tab="cdetails">
8	Details
9	</button>
10	<button class="card-tab" role="tab" aria-selected="false" data-tab="cmembers">
11	Members
12	</button>
13	<button class="card-tab" role="tab" aria-selected="false" data-tab="cintegrations">
14	Integrations
15	</button>
16	</div>
17	</div>
18	<div class="card-body">
19	<div class="card-panel active" id="cdetails" role="tabpanel">
20	<label class="field">
21	<span>
22	Project Name
23	</span>
24	<input type="text" value="forgelearn"/>
25	</label>
26	<label class="field">
27	<span>
28	Description
29	</span>
30	<textarea rows="2">
31	Engineering docs platform.
32	</textarea>
33	</label>
34	</div>
35	<div class="card-panel" id="cmembers" role="tabpanel">
36	<div class="member-list">
37	<div class="member">
38	<div class="member-avatar">
39	JD
40	</div>
41	<div>
42	<div class="member-name">
43	Jane Doe
44	</div>
45	<div class="member-role">
46	Owner
47	</div>
48	</div>
49	</div>
50	<div class="member">
51	<div class="member-avatar">
52	AS
53	</div>
54	<div>
55	<div class="member-name">
56	Alex Smith
57	</div>
58	<div class="member-role">
59	Editor
60	</div>
61	</div>
62	</div>
63	</div>
64	</div>
65	<div class="card-panel" id="cintegrations" role="tabpanel">
66	<div class="integration-list">
67	<div class="integration">
68	<svg viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" width="18" height="18">
69	<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>
70	</svg>
71	<span>
72	GitHub
73	</span>
74	<span class="badge">
75	Connected
76	</span>
77	</div>
78	<div class="integration">
79	<svg viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" width="18" height="18">
80	<path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/>
81	</svg>
82	<span>
83	Slack
84	</span>
85	<span class="badge outline">
86	Connect
87	</span>
88	</div>
89	</div>
90	</div>
91	</div>
92	</div>

untitled.css

CSS

1	.card-root {
2	max-width:520px;
3	margin:0 auto;
4	background:#111;
5	border:1px solid #2A2A2A;
6	border-radius:10px;
7	overflow:hidden
8	}
9	.card-header {
10	padding:20px 20px 0;
11	background:#0A0A0A;
12	border-bottom:1px solid #2A2A2A
13	}
14	.card-header h2 {
15	font-size:15px;
16	font-weight:600;
17	color:#E0E0E0;
18	margin-bottom:14px;
19	font-family:system-ui,
20	sans-serif
21	}
22	.card-tabs {
23	display:flex;
24	gap:4px
25	}
26	.card-tab {
27	padding:8px 14px;
28	font-size:12px;
29	font-weight:500;
30	font-family:system-ui,
31	sans-serif;
32	color:#808080;
33	background:transparent;
34	border:none;
35	border-bottom:2px solid transparent;
36	cursor:pointer;
37	transition:all .2s
38	}
39	.card-tab:hover {
40	color:#A0A0A0
41	}
42	.card-tab.active {
43	color:#00FF41;
44	border-bottom-color:#00FF41
45	}
46	.card-body {
47	padding:20px
48	}
49	.card-panel {
50	display:none
51	}
52	.card-panel.active {
53	display:block
54	}
55	.field {
56	display:flex;
57	flex-direction:column;
58	gap:4px;
59	margin-bottom:12px
60	}
61	.field span {
62	font-size:10px;
63	color:#666;
64	text-transform:uppercase;
65	letter-spacing:.5px
66	}
67	.field input,
68	.field textarea {
69	padding:8px 10px;
70	border-radius:6px;
71	border:1px solid #2A2A2A;
72	background:#0A0A0A;
73	color:#E0E0E0;
74	font-size:12px;
75	font-family:system-ui,
76	sans-serif;
77	resize:none
78	}
79	.member-list,
80	.integration-list {
81	display:flex;
82	flex-direction:column;
83	gap:10px
84	}
85	.member {
86	display:flex;
87	align-items:center;
88	gap:10px
89	}
90	.member-avatar {
91	width:32px;
92	height:32px;
93	border-radius:50%;
94	background:rgba(0,
95	255,
96	65,
97	.12);
98	color:#00FF41;
99	display:flex;
100	align-items:center;
101	justify-content:center;
102	font-size:11px;
103	font-weight:600
104	}
105	.member-name {
106	font-size:12px;
107	color:#E0E0E0;
108	font-weight:500
109	}
110	.member-role {
111	font-size:10px;
112	color:#808080
113	}
114	.integration {
115	display:flex;
116	align-items:center;
117	gap:10px;
118	padding:10px;
119	background:#0A0A0A;
120	border:1px solid #2A2A2A;
121	border-radius:6px;
122	font-size:12px;
123	color:#E0E0E0
124	}
125	.integration span {
126	flex:1
127	}
128	.badge {
129	font-size:10px;
130	font-weight:600;
131	padding:2px 8px;
132	border-radius:999px;
133	background:#00FF41;
134	color:#0A0A0A
135	}
136	.badge.outline {
137	background:transparent;
138	color:#00FF41;
139	border:1px solid #00FF41
140	}

untitled.html

HTML

1	<div class="max-w-lg mx-auto bg-[#111] border border-[#2A2A2A] rounded-xl overflow-hidden" data-cardtabs>
2	<div class="p-5 pb-0 bg-[#0A0A0A] border-b border-[#2A2A2A]">
3	<h2 class="text-[15px] font-semibold text-[#E0E0E0] mb-3.5">
4	Project Settings
5	</h2>
6	<div class="flex gap-1" role="tablist">
7	<button class="px-3.5 py-2 text-xs font-medium text-[#00FF41] border-b-2 border-[#00FF41] transition-colors" role="tab" aria-selected="true" data-tab="cvdetails">
8	Details
9	</button>
10	<button class="px-3.5 py-2 text-xs font-medium text-[#808080] hover:text-[#A0A0A0] border-b-2 border-transparent transition-colors" role="tab" aria-selected="false" data-tab="cvmembers">
11	Members
12	</button>
13	<button class="px-3.5 py-2 text-xs font-medium text-[#808080] hover:text-[#A0A0A0] border-b-2 border-transparent transition-colors" role="tab" aria-selected="false" data-tab="cvintegrations">
14	Integrations
15	</button>
16	</div>
17	</div>
18	<div class="p-5">
19	<div class="card-panel block" id="cvdetails" role="tabpanel">
20	<label class="flex flex-col gap-1 mb-3">
21	<span class="text-[10px] text-[#666] uppercase tracking-wider">
22	Project Name
23	</span>
24	<input type="text" value="forgelearn" class="px-2.5 py-2 rounded-md border border-[#2A2A2A] bg-[#0A0A0A] text-[#E0E0E0] text-xs"/>
25	</label>
26	<label class="flex flex-col gap-1">
27	<span class="text-[10px] text-[#666] uppercase tracking-wider">
28	Description
29	</span>
30	<textarea rows="2" class="px-2.5 py-2 rounded-md border border-[#2A2A2A] bg-[#0A0A0A] text-[#E0E0E0] text-xs resize-none">
31	Engineering docs platform.
32	</textarea>
33	</label>
34	</div>
35	<div class="card-panel hidden" id="cvmembers" role="tabpanel">
36	<div class="flex flex-col gap-2.5">
37	<div class="flex items-center gap-2.5">
38	<div class="w-8 h-8 rounded-full bg-[#00FF41]/12 text-[#00FF41] flex items-center justify-center text-[11px] font-semibold">
39	JD
40	</div>
41	<div>
42	<div class="text-xs text-[#E0E0E0] font-medium">
43	Jane Doe
44	</div>
45	<div class="text-[10px] text-[#808080]">
46	Owner
47	</div>
48	</div>
49	</div>
50	<div class="flex items-center gap-2.5">
51	<div class="w-8 h-8 rounded-full bg-[#00FF41]/12 text-[#00FF41] flex items-center justify-center text-[11px] font-semibold">
52	AS
53	</div>
54	<div>
55	<div class="text-xs text-[#E0E0E0] font-medium">
56	Alex Smith
57	</div>
58	<div class="text-[10px] text-[#808080]">
59	Editor
60	</div>
61	</div>
62	</div>
63	</div>
64	</div>
65	<div class="card-panel hidden" id="cvintegrations" role="tabpanel">
66	<div class="flex flex-col gap-2.5">
67	<div class="flex items-center gap-2.5 p-2.5 bg-[#0A0A0A] border border-[#2A2A2A] rounded-md text-xs text-[#E0E0E0]">
68	<svg viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" width="18" height="18">
69	<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>
70	</svg>
71	<span class="flex-1">
72	GitHub
73	</span>
74	<span class="text-[10px] font-semibold px-2 py-0.5 rounded-full bg-[#00FF41] text-[#0A0A0A]">
75	Connected
76	</span>
77	</div>
78	<div class="flex items-center gap-2.5 p-2.5 bg-[#0A0A0A] border border-[#2A2A2A] rounded-md text-xs text-[#E0E0E0]">
79	<svg viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" width="18" height="18">
80	<path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/>
81	</svg>
82	<span class="flex-1">
83	Slack
84	</span>
85	<span class="text-[10px] font-semibold px-2 py-0.5 rounded-full border border-[#00FF41] text-[#00FF41]">
86	Connect
87	</span>
88	</div>
89	</div>
90	</div>
91	</div>
92	</div>

untitled.html

HTML

1	<div class="card bg-black border-secondary mx-auto" style="max-width:520px">
2	<div class="card-header bg-dark border-secondary">
3	<h6 class="text-light mb-3">
4	Project Settings
5	</h6>
6	<ul class="nav nav-tabs border-secondary" id="cardTab" role="tablist">
7	<li class="nav-item" role="presentation">
8	<button class="nav-link active fw-medium small" style="color:#00FF41;background:transparent;border-bottom:2px solid #00FF41" id="bc-details-tab" data-bs-toggle="tab" data-bs-target="#bc-details" type="button" role="tab" aria-selected="true">
9	Details
10	</button>
11	</li>
12	<li class="nav-item" role="presentation">
13	<button class="nav-link fw-medium small text-secondary" style="background:transparent;border-bottom:2px solid transparent" id="bc-members-tab" data-bs-toggle="tab" data-bs-target="#bc-members" type="button" role="tab" aria-selected="false">
14	Members
15	</button>
16	</li>
17	<li class="nav-item" role="presentation">
18	<button class="nav-link fw-medium small text-secondary" style="background:transparent;border-bottom:2px solid transparent" id="bc-integrations-tab" data-bs-toggle="tab" data-bs-target="#bc-integrations" type="button" role="tab" aria-selected="false">
19	Integrations
20	</button>
21	</li>
22	</ul>
23	</div>
24	<div class="card-body tab-content">
25	<div class="tab-pane fade show active" id="bc-details" role="tabpanel">
26	<label class="d-block small text-secondary mb-1">
27	Project Name
28	</label>
29	<input type="text" class="form-control form-control-sm bg-dark border-secondary text-light mb-3" value="forgelearn"/>
30	<label class="d-block small text-secondary mb-1">
31	Description
32	</label>
33	<textarea class="form-control form-control-sm bg-dark border-secondary text-light" rows="2">
34	Engineering docs platform.
35	</textarea>
36	</div>
37	<div class="tab-pane fade" id="bc-members" role="tabpanel">
38	<div class="d-flex flex-column gap-2">
39	<div class="d-flex align-items-center gap-2">
40	<div class="rounded-circle d-flex align-items-center justify-content-center fw-semibold small" style="width:32px;height:32px;background:rgba(0,255,65,.12);color:#00FF41">
41	JD
42	</div>
43	<div>
44	<div class="text-light small mb-0">
45	Jane Doe
46	</div>
47	<div class="text-secondary small">
48	Owner
49	</div>
50	</div>
51	</div>
52	<div class="d-flex align-items-center gap-2">
53	<div class="rounded-circle d-flex align-items-center justify-content-center fw-semibold small" style="width:32px;height:32px;background:rgba(0,255,65,.12);color:#00FF41">
54	AS
55	</div>
56	<div>
57	<div class="text-light small mb-0">
58	Alex Smith
59	</div>
60	<div class="text-secondary small">
61	Editor
62	</div>
63	</div>
64	</div>
65	</div>
66	</div>
67	<div class="tab-pane fade" id="bc-integrations" role="tabpanel">
68	<div class="d-flex flex-column gap-2">
69	<div class="d-flex align-items-center gap-2 p-2 bg-dark border border-secondary rounded">
70	<svg viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" width="18" height="18">
71	<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>
72	</svg>
73	<span class="flex-grow-1 text-light small">
74	GitHub
75	</span>
76	<span class="badge" style="background:#00FF41;color:#0A0A0A">
77	Connected
78	</span>
79	</div>
80	<div class="d-flex align-items-center gap-2 p-2 bg-dark border border-secondary rounded">
81	<svg viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" width="18" height="18">
82	<path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/>
83	</svg>
84	<span class="flex-grow-1 text-light small">
85	Slack
86	</span>
87	<span class="badge border" style="color:#00FF41;border-color:#00FF41;background:transparent">
88	Connect
89	</span>
90	</div>
91	</div>
92	</div>
93	</div>
94	</div>

preview

Accessibility

Tabs are interactive controls, so they must be keyboard operable and clearly announced by screen readers. Follow these practical guidelines for every tab pattern.

Use a real <button> for each tab so it is focusable and triggers with Enter/Space.
Wrap tabs in an element with role="tablist"; each tab needs role="tab".
Mark the active tab with aria-selected="true" and inactive tabs with aria-selected="false".
Give each content container role="tabpanel" and link it to the tab via aria-controls when possible.
Support ArrowLeft/ArrowRight keyboard navigation inside the tablist.
Ensure focus indicators are visible against the dark background.
Icon-only tabs require an aria-label on the button.

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	.tabs-root {
2	max-width:420px;
3	margin:0 auto;
4	background:#111;
5	border:1px solid #2A2A2A;
6	border-radius:10px;
7	overflow:hidden
8	}
9	.icon-list {
10	display:flex;
11	justify-content:center;
12	gap:8px;
13	padding:16px;
14	background:#0A0A0A;
15	border-bottom:1px solid #2A2A2A
16	}
17	.icon-tab {
18	display:flex;
19	align-items:center;
20	gap:6px;
21	padding:8px 14px;
22	border-radius:8px;
23	font-size:11px;
24	font-weight:500;
25	font-family:system-ui,
26	sans-serif;
27	color:#808080;
28	background:transparent;
29	border:none;
30	cursor:pointer;
31	transition:all .2s
32	}
33	.icon-tab:hover {
34	color:#A0A0A0;
35	background:rgba(255,
36	255,
37	255,
38	.03)
39	}
40	.icon-tab.active {
41	color:#00FF41;
42	background:rgba(0,
43	255,
44	65,
45	.08)
46	}
47	.icon-tab svg {
48	flex-shrink:0
49	}
50	.icon-panel {
51	display:none;
52	padding:24px;
53	text-align:center
54	}
55	.icon-panel.active {
56	display:block
57	}
58	.panel-desc {
59	font-size:12px;
60	color:#808080;
61	font-family:system-ui,
62	sans-serif
63	}

1	.tabs-root {
2	max-width:560px;
3	margin:0 auto;
4	display:flex;
5	background:#111;
6	border:1px solid #2A2A2A;
7	border-radius:10px;
8	overflow:hidden;
9	min-height:220px
10	}
11	.v-list {
12	display:flex;
13	flex-direction:column;
14	gap:2px;
15	padding:10px;
16	background:#0A0A0A;
17	border-right:1px solid #2A2A2A;
18	min-width:150px
19	}
20	.v-tab {
21	display:flex;
22	align-items:center;
23	gap:8px;
24	padding:10px 14px;
25	border-radius:6px;
26	font-size:12px;
27	font-weight:500;
28	font-family:system-ui,
29	sans-serif;
30	color:#808080;
31	background:transparent;
32	border:none;
33	cursor:pointer;
34	transition:all .15s;
35	text-align:left
36	}
37	.v-tab:hover {
38	color:#E0E0E0;
39	background:rgba(255,
40	255,
41	255,
42	.03)
43	}
44	.v-tab.active {
45	color:#00FF41;
46	background:rgba(0,
47	255,
48	65,
49	.05)
50	}
51	.v-body {
52	flex:1;
53	padding:20px
54	}
55	.v-panel {
56	display:none
57	}
58	.v-panel.active {
59	display:block
60	}
61	.v-panel h3 {
62	font-size:14px;
63	font-weight:600;
64	color:#E0E0E0;
65	margin-bottom:14px;
66	font-family:system-ui,
67	sans-serif
68	}
69	.v-field {
70	display:flex;
71	flex-direction:column;
72	gap:4px;
73	margin-bottom:12px
74	}
75	.v-field span {
76	font-size:10px;
77	color:#666;
78	text-transform:uppercase;
79	letter-spacing:.5px
80	}
81	.v-field input,
82	.v-field select {
83	padding:8px 10px;
84	border-radius:6px;
85	border:1px solid #2A2A2A;
86	background:#0A0A0A;
87	color:#E0E0E0;
88	font-size:12px;
89	font-family:system-ui,
90	sans-serif
91	}
92	.v-desc {
93	font-size:12px;
94	color:#808080;
95	line-height:1.5;
96	font-family:system-ui,
97	sans-serif
98	}