Tabs
Tabs split content into sections you switch between with a click: only the selected tab's content is visible. On a LearnUp course page these are "Syllabus", "Reviews" and "Instructor". The component is the tabs class, and a single tab is tab.
A row of tabs
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div role="tablist" class="tabs tabs-box">
<a role="tab" class="tab tab-active">Syllabus</a>
<a role="tab" class="tab">Reviews</a>
<a role="tab" class="tab">Instructor</a>
</div>A grey strip with three tabs, the first highlighted with a white pill — tab-active marks it. The role="tablist" and role="tab" attributes tell screen readers these are tabs. By themselves such tabs switch nothing: tab-active moves with a link to another page or with a script.
Tab styles
| Modifier | Look |
|---|---|
| no style | Plain text, the active tab is brighter |
tabs-box | Tabs on a shared pill |
tabs-border | A line under the active tab |
tabs-lift | Tabs like on a paper folder |
Sizes are tabs-xs … tabs-xl, as with buttons.
Tabs with content
To make tabs switch content without JavaScript, they are made of radio buttons: <input type="radio" class="tab"> with a shared name. The tab label comes from the aria-label attribute, and right after each tab comes its tab-content block:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="tabs tabs-lift">
<input type="radio" name="course-tabs" class="tab" aria-label="Syllabus" checked>
<div class="tab-content border-base-300 bg-base-100 p-6">
12 lessons: tags, links, lists, tables and forms.
</div>
<input type="radio" name="course-tabs" class="tab" aria-label="Reviews">
<div class="tab-content border-base-300 bg-base-100 p-6">
"Clear even with no experience" — Oleg.
</div>
<input type="radio" name="course-tabs" class="tab" aria-label="Instructor">
<div class="tab-content border-base-300 bg-base-100 p-6">
Anna, a front-end developer with 8 years of experience.
</div>
</div>Click the tabs — the text in the white frame below changes. The checked attribute picks the tab that is open at first. Radio buttons with a shared name cannot be checked at the same time, so exactly one content block is always visible.
Common mistake
Putting all the tabs first and all the content blocks after them:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="tabs tabs-lift">
<input type="radio" name="wrong-tabs" class="tab" aria-label="Syllabus" checked>
<input type="radio" name="wrong-tabs" class="tab" aria-label="Reviews">
<div class="tab-content bg-base-100 p-6">12 lessons.</div>
<div class="tab-content bg-base-100 p-6">"Clear even with no experience".</div>
</div>With "Syllabus" selected no content appears at all, and with "Reviews" selected you see the syllabus text: daisyUI shows the tab-content block that comes right after the checked tab. Keep the order "tab — its content — next tab".