Tabs

Content-switching tab panels. Supports CSS-only switching with radio inputs and scrollable overflow with navigation arrows.

Basic (with links)

Preview

Tab 1 Tab 2 Tab 3

<div style="display:flex; flex-direction:column; height:100%; overflow:hidden;">
  <div class="tabs tabs-border">
    <a class="tab">Tab 1</a>
    <a class="tab tab-active">Tab 2</a>
    <a class="tab">Tab 3</a>
  </div>
  <div style="flex:1; background:var(--color-base-200);"></div>
</div>

Requires: ux.min.css

<div style="display:flex; flex-direction:column; height:100%; overflow:hidden;">
  <div class="w-full flex flex-wrap items-end border-b border-base-300">
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer border-b-2 border-transparent opacity-60 hover:opacity-85 transition-colors">Tab 1</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer border-b-2 border-primary text-primary opacity-100">Tab 2</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer border-b-2 border-transparent opacity-60 hover:opacity-85 transition-colors">Tab 3</a>
  </div>
  <div style="flex:1; background:var(--color-base-200);"></div>
</div>

Requires: tw.min.css

// With links/buttons, use JS to toggle tab-active class:
// tab.addEventListener('click', () => {
//   tabs.querySelectorAll('.tab').forEach(t => t.classList.remove('tab-active'));
//   tab.classList.add('tab-active');
// });

CSS-Only with Radio Inputs

Preview

Overview content goes here.

Features content goes here.

Pricing content goes here.

<div style="display:flex; flex-direction:column; height:100%; overflow:hidden;">
  <div class="tabs tabs-border">
    <input type="radio" name="tabs-demo" class="tab" aria-label="Overview" />
    <div class="tab-content p-4">Overview content goes here.</div>
    <input type="radio" name="tabs-demo" class="tab" aria-label="Features" checked />
    <div class="tab-content p-4">Features content goes here.</div>
    <input type="radio" name="tabs-demo" class="tab" aria-label="Pricing" />
    <div class="tab-content p-4">Pricing content goes here.</div>
  </div>
</div>

Requires: ux.min.css

<!-- CSS-only tab switching requires semantic .tabs classes or custom CSS -->
<!-- The radio input pattern relies on input:checked + .tab-content selector -->
<div style="display:flex; flex-direction:column; height:100%; overflow:hidden;">
  <div class="tabs tabs-border">
    <input type="radio" name="tabs-tw" class="tab" aria-label="Overview" />
    <div class="tab-content p-4">Overview content goes here.</div>
    <input type="radio" name="tabs-tw" class="tab" aria-label="Features" checked />
    <div class="tab-content p-4">Features content goes here.</div>
    <input type="radio" name="tabs-tw" class="tab" aria-label="Pricing" />
    <div class="tab-content p-4">Pricing content goes here.</div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required — uses CSS radio input pattern
// Each input:checked + .tab-content becomes visible automatically

Box Style

Preview

Content for Tab 1

Content for Tab 2

Content for Tab 3

<div style="display:flex; flex-direction:column; height:100%; overflow:hidden;">
  <div class="tabs tabs-box">
    <input type="radio" name="tabs-box" class="tab" aria-label="Tab 1" checked />
    <div class="tab-content p-4">Content for Tab 1</div>
    <input type="radio" name="tabs-box" class="tab" aria-label="Tab 2" />
    <div class="tab-content p-4">Content for Tab 2</div>
    <input type="radio" name="tabs-box" class="tab" aria-label="Tab 3" />
    <div class="tab-content p-4">Content for Tab 3</div>
  </div>
</div>

Requires: ux.min.css

<!-- Box style uses a contained background with active indicator -->
<div style="display:flex; flex-direction:column; height:100%; overflow:hidden;">
  <div class="tabs tabs-box">
    <input type="radio" name="tabs-box-tw" class="tab" aria-label="Tab 1" checked />
    <div class="tab-content p-4">Content for Tab 1</div>
    <input type="radio" name="tabs-box-tw" class="tab" aria-label="Tab 2" />
    <div class="tab-content p-4">Content for Tab 2</div>
    <input type="radio" name="tabs-box-tw" class="tab" aria-label="Tab 3" />
    <div class="tab-content p-4">Content for Tab 3</div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required — pure CSS radio input pattern

Lift Style

Preview

Content for Tab 1

Content for Tab 2

Content for Tab 3

<div style="display:flex; flex-direction:column; height:100%; overflow:hidden;">
  <div class="tabs tabs-lift">
    <input type="radio" name="tabs-lift" class="tab" aria-label="Tab 1" checked />
    <div class="tab-content p-4">Content for Tab 1</div>
    <input type="radio" name="tabs-lift" class="tab" aria-label="Tab 2" />
    <div class="tab-content p-4">Content for Tab 2</div>
    <input type="radio" name="tabs-lift" class="tab" aria-label="Tab 3" />
    <div class="tab-content p-4">Content for Tab 3</div>
  </div>
</div>

Requires: ux.min.css

<!-- Lift style creates card-like tabs with borders -->
<div style="display:flex; flex-direction:column; height:100%; overflow:hidden;">
  <div class="tabs tabs-lift">
    <input type="radio" name="tabs-lift-tw" class="tab" aria-label="Tab 1" checked />
    <div class="tab-content p-4">Content for Tab 1</div>
    <input type="radio" name="tabs-lift-tw" class="tab" aria-label="Tab 2" />
    <div class="tab-content p-4">Content for Tab 2</div>
    <input type="radio" name="tabs-lift-tw" class="tab" aria-label="Tab 3" />
    <div class="tab-content p-4">Content for Tab 3</div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required — pure CSS radio input pattern

Scrollable Tabs

Scrollable with Arrows

Preview

Dashboard Analytics Reports Customers Products Orders Invoices Settings Integrations Notifications Billing Support

<div style="display:flex; flex-direction:column; height:100%; overflow:hidden;">
  <div class="tabs tabs-border tabs-scroll" id="scroll-tabs-1">
    <button class="tabs-arrow tabs-arrow-left" onclick="this.parentElement.scrollBy({left:-120,behavior:'smooth'})">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/></svg>
    </button>
    <a class="tab tab-active">Dashboard</a>
    <a class="tab">Analytics</a>
    <a class="tab">Reports</a>
    <a class="tab">Customers</a>
    <a class="tab">Products</a>
    <a class="tab">Orders</a>
    <a class="tab">Invoices</a>
    <a class="tab">Settings</a>
    <a class="tab">Integrations</a>
    <a class="tab">Notifications</a>
    <a class="tab">Billing</a>
    <a class="tab">Support</a>
    <button class="tabs-arrow tabs-arrow-right" onclick="this.parentElement.scrollBy({left:120,behavior:'smooth'})">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg>
    </button>
  </div>
  <div style="flex:1; background:var(--color-base-200);"></div>
</div>

Requires: ux.min.css

<div style="display:flex; flex-direction:column; height:100%; overflow:hidden;">
  <div class="w-full flex items-end border-b border-base-300 overflow-x-auto [scrollbar-width:none] [-webkit-overflow-scrolling:touch]" style="-ms-overflow-style:none;">
    <button class="sticky left-0 z-1 flex items-center justify-center shrink-0 w-8 opacity-50 hover:opacity-100 cursor-pointer" style="background:linear-gradient(to right,var(--color-base-100) 60%,transparent);" onclick="this.parentElement.scrollBy({left:-120,behavior:'smooth'})">
      <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/></svg>
    </button>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer border-b-2 border-primary text-primary opacity-100 shrink-0">Dashboard</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer border-b-2 border-transparent opacity-60 shrink-0">Analytics</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer border-b-2 border-transparent opacity-60 shrink-0">Reports</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer border-b-2 border-transparent opacity-60 shrink-0">Customers</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer border-b-2 border-transparent opacity-60 shrink-0">Products</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer border-b-2 border-transparent opacity-60 shrink-0">Orders</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer border-b-2 border-transparent opacity-60 shrink-0">Invoices</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer border-b-2 border-transparent opacity-60 shrink-0">Settings</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer border-b-2 border-transparent opacity-60 shrink-0">Integrations</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer border-b-2 border-transparent opacity-60 shrink-0">Notifications</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer border-b-2 border-transparent opacity-60 shrink-0">Billing</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer border-b-2 border-transparent opacity-60 shrink-0">Support</a>
    <button class="sticky right-0 z-1 flex items-center justify-center shrink-0 w-8 opacity-50 hover:opacity-100 cursor-pointer" style="background:linear-gradient(to left,var(--color-base-100) 60%,transparent);" onclick="this.parentElement.scrollBy({left:120,behavior:'smooth'})">
      <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg>
    </button>
  </div>
  <div style="flex:1; background:var(--color-base-200);"></div>
</div>

Requires: tw.min.css

// Arrow click scrolls the tab container
// The arrows use onclick with scrollBy for smooth scrolling:
// this.parentElement.scrollBy({ left: 120, behavior: 'smooth' })
//
// You can also scroll with mouse wheel or touch/swipe on mobile

Scrollable Box Style

Preview

Dashboard Analytics Reports Customers Products Orders Invoices Settings Integrations Notifications

<div style="display:flex; flex-direction:column; height:100%; overflow:hidden;">
  <div class="tabs tabs-box tabs-scroll">
    <button class="tabs-arrow tabs-arrow-left" onclick="this.parentElement.scrollBy({left:-120,behavior:'smooth'})">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/></svg>
    </button>
    <a class="tab tab-active">Dashboard</a>
    <a class="tab">Analytics</a>
    <a class="tab">Reports</a>
    <a class="tab">Customers</a>
    <a class="tab">Products</a>
    <a class="tab">Orders</a>
    <a class="tab">Invoices</a>
    <a class="tab">Settings</a>
    <a class="tab">Integrations</a>
    <a class="tab">Notifications</a>
    <button class="tabs-arrow tabs-arrow-right" onclick="this.parentElement.scrollBy({left:120,behavior:'smooth'})">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg>
    </button>
  </div>
  <div style="flex:1; background:var(--color-base-200);"></div>
</div>

Requires: ux.min.css

<div style="display:flex; flex-direction:column; height:100%; overflow:hidden;">
  <div class="w-full flex items-end bg-base-200 rounded-lg p-1 overflow-x-auto [scrollbar-width:none]" style="-ms-overflow-style:none;">
    <button class="sticky left-0 z-1 flex items-center justify-center shrink-0 w-8 opacity-50 hover:opacity-100 cursor-pointer" style="background:linear-gradient(to right,var(--color-base-200) 60%,transparent);" onclick="this.parentElement.scrollBy({left:-120,behavior:'smooth'})">
      <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/></svg>
    </button>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer rounded-md bg-base-100 shadow-sm opacity-100 shrink-0">Dashboard</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer rounded-md opacity-70 shrink-0">Analytics</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer rounded-md opacity-70 shrink-0">Reports</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer rounded-md opacity-70 shrink-0">Customers</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer rounded-md opacity-70 shrink-0">Products</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer rounded-md opacity-70 shrink-0">Orders</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer rounded-md opacity-70 shrink-0">Invoices</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer rounded-md opacity-70 shrink-0">Settings</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer rounded-md opacity-70 shrink-0">Integrations</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer rounded-md opacity-70 shrink-0">Notifications</a>
    <button class="sticky right-0 z-1 flex items-center justify-center shrink-0 w-8 opacity-50 hover:opacity-100 cursor-pointer" style="background:linear-gradient(to left,var(--color-base-200) 60%,transparent);" onclick="this.parentElement.scrollBy({left:120,behavior:'smooth'})">
      <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg>
    </button>
  </div>
  <div style="flex:1; background:var(--color-base-200);"></div>
</div>

Requires: tw.min.css

// Arrow click scrolls the tab container
// this.parentElement.scrollBy({ left: 120, behavior: 'smooth' })

Sizes

Size Variants

Preview

XS Tab Tab

SM Tab Tab

Default Tab Tab

LG Tab Tab

<div style="display:flex; flex-direction:column; gap:1rem; padding:1rem; height:100%; overflow-y:auto;">
  <div class="tabs tabs-box tabs-xs">
    <a class="tab tab-active">XS</a>
    <a class="tab">Tab</a>
    <a class="tab">Tab</a>
  </div>
  <div class="tabs tabs-box tabs-sm">
    <a class="tab tab-active">SM</a>
    <a class="tab">Tab</a>
    <a class="tab">Tab</a>
  </div>
  <div class="tabs tabs-box">
    <a class="tab tab-active">Default</a>
    <a class="tab">Tab</a>
    <a class="tab">Tab</a>
  </div>
  <div class="tabs tabs-box tabs-lg">
    <a class="tab tab-active">LG</a>
    <a class="tab">Tab</a>
    <a class="tab">Tab</a>
  </div>
</div>

Requires: ux.min.css

<!-- Sizes control height and font-size of the tab items -->
<div style="display:flex; flex-direction:column; gap:1rem; padding:1rem; height:100%; overflow-y:auto;">
  <div class="tabs tabs-box tabs-xs">
    <a class="tab tab-active">XS</a>
    <a class="tab">Tab</a>
    <a class="tab">Tab</a>
  </div>
  <div class="tabs tabs-box tabs-sm">
    <a class="tab tab-active">SM</a>
    <a class="tab">Tab</a>
    <a class="tab">Tab</a>
  </div>
  <div class="tabs tabs-box">
    <a class="tab tab-active">Default</a>
    <a class="tab">Tab</a>
    <a class="tab">Tab</a>
  </div>
  <div class="tabs tabs-box tabs-lg">
    <a class="tab tab-active">LG</a>
    <a class="tab">Tab</a>
    <a class="tab">Tab</a>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Variants

Glass

Preview

Tab 1 Tab 2 Tab 3

<div style="background: linear-gradient(135deg, oklch(0.55 0.22 250), oklch(0.55 0.20 280)); display:flex; flex-direction:column; height:100%; overflow:hidden;">
  <div class="tabs glass" style="margin:1rem;">
    <a class="tab">Tab 1</a>
    <a class="tab tab-active">Tab 2</a>
    <a class="tab">Tab 3</a>
  </div>
  <div style="flex:1;"></div>
</div>

Requires: ux.min.css

<div style="background: linear-gradient(135deg, oklch(0.55 0.22 250), oklch(0.55 0.20 280)); display:flex; flex-direction:column; height:100%; overflow:hidden;">
  <div class="flex items-end bg-glass-bg backdrop-blur-glass backdrop-saturate-180 border border-glass-border rounded-lg p-1" style="margin:1rem;">
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer rounded-md opacity-60 hover:opacity-85 transition-colors">Tab 1</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer rounded-md opacity-100 bg-white/25">Tab 2</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer rounded-md opacity-60 hover:opacity-85 transition-colors">Tab 3</a>
  </div>
  <div style="flex:1;"></div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Disabled Tab

Preview

Active Normal Disabled

<div style="display:flex; flex-direction:column; height:100%; overflow:hidden;">
  <div class="tabs tabs-border">
    <a class="tab tab-active">Active</a>
    <a class="tab">Normal</a>
    <a class="tab tab-disabled">Disabled</a>
  </div>
  <div style="flex:1; background:var(--color-base-200);"></div>
</div>

Requires: ux.min.css

<div style="display:flex; flex-direction:column; height:100%; overflow:hidden;">
  <div class="w-full flex items-end border-b border-base-300">
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer border-b-2 border-primary text-primary opacity-100">Active</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer border-b-2 border-transparent opacity-60 hover:opacity-85 transition-colors">Normal</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap opacity-30 pointer-events-none border-b-2 border-transparent">Disabled</a>
  </div>
  <div style="flex:1; background:var(--color-base-200);"></div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Inside a Page

Header + Tabs + Content

Preview

Overview Analytics Reports Customers Products Orders Settings

Tab content area. The header stays fixed at top, tabs below it, and this content scrolls.

<div class="page" style="height:100%;">
  <header class="header">
    <span class="font-semibold">My App</span>
    <button class="btn btn-sm btn-ghost btn-circle">
      <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" /></svg>
    </button>
  </header>
  <div class="tabs tabs-border tabs-scroll">
    <button class="tabs-arrow tabs-arrow-left" onclick="this.parentElement.scrollBy({left:-120,behavior:'smooth'})">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/></svg>
    </button>
    <a class="tab tab-active">Overview</a>
    <a class="tab">Analytics</a>
    <a class="tab">Reports</a>
    <a class="tab">Customers</a>
    <a class="tab">Products</a>
    <a class="tab">Orders</a>
    <a class="tab">Settings</a>
    <button class="tabs-arrow tabs-arrow-right" onclick="this.parentElement.scrollBy({left:120,behavior:'smooth'})">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg>
    </button>
  </div>
  <main class="content">
    <div class="p-4">
      <p>Tab content area. The header stays fixed at top, tabs below it, and this content scrolls.</p>
    </div>
  </main>
</div>

Requires: ux.min.css

<div class="flex flex-col h-full bg-base-100">
  <header class="w-full flex items-center justify-between shrink-0 gap-2 px-4 py-3 min-h-12 border-b border-base-300 bg-base-100">
    <span class="font-semibold">My App</span>
    <button class="btn btn-sm btn-ghost btn-circle">
      <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" /></svg>
    </button>
  </header>
  <div class="w-full flex items-end border-b border-base-300 overflow-x-auto [scrollbar-width:none] shrink-0">
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer border-b-2 border-primary text-primary opacity-100 shrink-0">Overview</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer border-b-2 border-transparent opacity-60 shrink-0">Analytics</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer border-b-2 border-transparent opacity-60 shrink-0">Reports</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer border-b-2 border-transparent opacity-60 shrink-0">Customers</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer border-b-2 border-transparent opacity-60 shrink-0">Products</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer border-b-2 border-transparent opacity-60 shrink-0">Orders</a>
    <a class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium whitespace-nowrap cursor-pointer border-b-2 border-transparent opacity-60 shrink-0">Settings</a>
  </div>
  <main class="flex-1 min-h-0 overflow-y-auto">
    <div class="p-4">
      <p>Tab content area. The header stays fixed at top, tabs below it, and this content scrolls.</p>
    </div>
  </main>
</div>

Requires: tw.min.css

// Arrow buttons scroll the tab container:
// onclick="this.parentElement.scrollBy({left: 120, behavior: 'smooth'})"
//
// Native touch/swipe scrolling works automatically on mobile

Reference

Class	Description
.tabs	Container for tabs
.tab	Individual tab (a, button, or input[type=radio])
.tab-content	Content panel (visible when radio sibling is checked)
.tab-content-active	Manually show a tab content panel
.tab-active	Active tab state
.tab-disabled	Disabled tab
.tab-icon	Icon inside a tab
.tabs-border	Bottom border style
.tabs-box	Contained box style
.tabs-lift	Lifted card-like style
.tabs-scroll	Horizontal scroll with hidden scrollbar
.tabs-arrow	Arrow button for scrollable tabs
.tabs-arrow-left / .tabs-arrow-right	Left/right arrow with fade gradient
.tabs.glass	Glassmorphism variant
.tabs-xs / .tabs-sm / .tabs-lg	Size variants