32 Tailwind CSS tabs for app settings panels, IDE and terminal UIs, dashboard filters, mobile nav bars, and type-specimen cards — spanning sliding underline and pill indicators, iOS segmented controls, vertical timeline rails, bento card tabs, neon and neo-brutalist keys, variable-weight type, and riso, stencil and bookmark-ribbon print effects. Scoped under .ttb-NN for no-collision pasting, prefers-reduced-motion guarded, framework-agnostic.
Building a whole Tailwind app, not just this component?
You just browsed 32 Tailwind tabs. Untitled UI Pro unlocks 5,000+ components and sections and 250+ page examples for React, styled with Tailwind CSS v4. One licence is a one-time $349 with lifetime updates; teams start at $999.
The most-searched tab pattern: an ink underline that glides beneath the active tab. The CSS original measured offsetLeft in JavaScript; the Tailwind port sets an index with has-[#ttb01-r2:checked]:[--i:1] and moves the bar with translate-x-[calc(var(--i)*100%)]. Zero JavaScript, no resize listener, and the panels fade in with starting:.
Four electric tabs, each carrying its own accent in one custom property. Every label shares a single class list — text-(--c) border-(--c) bg-(--c)/12 — and only [--c:…] differs. The root re-points the same variable for the active tab, so the panel's glow and title follow the selection.
Heavy uppercase keys with hard 4px offset shadows. The checked tab presses flush: it translates exactly as far as its shadow shrinks, so the shadow's far edge never moves and the key appears to sink into the page. The panel is a brutalist card of its own.
Violet, rose, cyan and lime: four tabs that keep their identity whether active or not. At rest each is a 6% wash with a 30% border; checked, the wash rises to 18%, the border solidifies and a glow appears. The original's four modifier classes and four checked rules collapsed into one shared class list keyed on [--c:…].
IDE file tabs with language dots, an accent stripe on the active tab and an editor body that merges with it. The port adds what a real editor shows: a breadcrumb, CSS-counter line numbers that don't copy, a close glyph on the active tab and a status bar — all from utilities.
Apple's segmented control: a grey track, a white thumb that slides between segments, and the hairline dividers iOS draws between unselected segments. The port deletes the measuring script — the thumb moves with translate-x-[calc(var(--i)*100%)] — and adds the divider detail with an arbitrary sibling variant.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A three-tile bento where the tabs are the cards: each shows an icon, a metric and a caption before it's even opened. The checked card lifts, gains a violet ring and a tinted shadow, and its panel becomes the full-width fourth cell beneath — entering with starting:.
A settings sidebar on a timeline rail: hollow dots for each section, a solid glowing dot for the active one, and — new in the port — a progress fill that runs down the rail to the active step. Beside it, the content pane switches; on phones the two stack.
A phosphor-green terminal: traffic-light title bar, tabs for three shells, scanlines, a vignette and a blinking block cursor after the prompt. The port sets the output in VT323, a face drawn from DEC terminal glyphs, and makes the glow a token-driven [text-shadow:…].
Compact icon-only tabs in a white pill; the active one fills rose and its label morphs in beside the icon. The label animates max-w-0 → max-w-28 while the gap opens gap-0 → gap-2 on the same curve, so icon and text glide together. Inbox gains an unread badge.
Choosing a tab types the panel's line out character by character, then leaves a blinking amber caret. The original's steps(20) was a magic number that only fit one string; the port gives each line its own [--n:16] and animates to calc(var(--n)*1ch) in exactly steps(var(--n)), so any string types one glyph per step.
Selecting a tab fires eight coloured sparks outward from its label while a coral underline slides beneath. The original spawned DOM nodes in JavaScript and removed them with timers; the port keeps eight sparks per tab and starts their animation with group-has-checked/tab:animate-ttb12-burst — an animation restarts whenever its selector starts matching.
A letterpress specimen card: a large mint serial number rolls to each typeface's catalogue number, a rule slides under the active name, and the panel shows a live specimen in that face. The original flipped the number with a setTimeout; the port stacks three serials in one grid cell and rolls them with translate-y.
The active tab's word swells from a compact 15px label to 46px display type and is cropped by its own cell — the word overruns the box and the box cuts it. Instrument Serif gives the crop a sharp editorial edge; a thin ruled frame keeps the strip reading like a specimen sheet.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
An app-shell sidebar on warm stone: icon rows, an olive accent bar that slides vertically to the active row, and a content pane beside it. The original measured offsetTop; the port slides the bar with translate-y-[calc(var(--i)*(100%+4px))] — each step is one 44px row plus its 4px gap.
A mobile nav bar in a soft white pill. The chosen item grows (flex-1 → flex-[2.6]), a pink halo blooms behind its icon and the label slides out beside it. The port fixes the original's unreadable mint label (1.9:1 on white) with a deep-teal label token while the icon keeps the bright mint.
Pure type-weight contrast: inactive labels are 200 hairline, the active one dials up to 900 black on Geist's variable axis while a violet rule draws in. The port fixes the original's layout jitter — bolding a word makes it wider and shoved its neighbours — by reserving each label's black-weight width with an invisible twin.
Tracked mono caps above a single heavy pressroom-red bar that slides like a bookmark along a typecase shelf. The original measured each label's width; the port gives the four volumes equal columns and a second line of dates, so the bar steps by quarters with the index trick.
Inactive tabs are single serif initials; the chosen one tips its capital into a terracotta drop cap (rotate −4°, scale 1.15 from the baseline) and unfolds the rest of the word in italic. Set in Fraunces, whose 900 cut and soft italic give the woodblock-and-ink contrast the idea needs.
Two-colour print: safety-yellow plates stamped on matte ink. The active plate lifts 2px and gains a hazard-stripe header, and the labels are set in Big Shoulders Stencil — a real stencil face with bridges in its counters — instead of tracked monospace pretending to be one.
A pair of crimson brackets frames the active word and slides between choices. The original positioned two spans from measured offsets; the port puts both brackets inside one span the width of a column and moves that span — the brackets stay pinned to the cell edges and travel together.
Four primary tiles — red, yellow, black and cream — each marked with a Bauhaus primitive: circle, square, triangle, half-moon. The chosen tile rises 6px and drops a hard shadow; there's no shared highlight colour because the tile itself is the indicator.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A crimson ink bar with cream legends; the chosen tab inverts to crimson-on-cream in a single frame while an inset shadow thumps in and lifts — a rubber stamp bedding into paper. The port runs the impact from has-checked:animate-ttb23-impact and adds a stamped "filed" mark that lands on the panel.
Hairline-framed tabs on warm white. The chosen frame inks a 4px navy top edge and four dots pop onto its corners a beat later, like crop marks. The 4px top border is reserved transparent from the start, so selecting a tab never moves the row by a pixel.
A dark capsule of icon tabs; the active one becomes a hot-pink pill that grows to make room for its label. Flex growth, icon scale and label reveal share one spring curve. The port gives the pill a soft pink bloom and keeps every collapsed label in the accessibility tree.
A two-plate riso pull: the chosen tab gets a fluoro-orange plate with a cyan plate misregistered 4px down-left, multiplied together into a third ink where they overlap. The port moves the bar onto paper stock — multiply only reads correctly on light paper, which is how a riso actually prints — and adds a halftone texture.
Italic slab-serif tabs on cream vellum; the active word gets an emerald swash that draws itself beneath the letters like a calligrapher's flourish. The port normalises the path with pathLength="1", so the draw is exact for any curve, and sets the labels in Zilla Slab italic.
A foundry specimen card: the foundry mark on the left, large glyph tabs on the right — Aa for the roman, Bb for the bold, Cc for small caps. The chosen glyph pulses vermilion; the panel now shows a full pangram in that cut, set in Fraunces.
Grid / List / Cards: a solid indigo pill glides under icon-and-label tabs on cream stock, and the label inverts as the pill arrives. The original measured the pill in JavaScript; the port slides it with the index trick and turns each panel into a live layout preview of the view you chose.
Sand-coloured folio tabs on charcoal whose top-right corner folds down — 8px on hover, 18px when chosen — with a darker underside triangle and a 4px lift. The port fixes two bugs in the original: its shadow was clipped away by its own clip-path, and its 4-point and 5-point polygons couldn't interpolate smoothly.
A velvet aubergine ribbon trimmed in gilt hangs from a top rail over the active icon, on warm linen. The original measured each button to centre the ribbon; the port wraps the ribbon in a column-wide frame that slides with the index trick, so it stays centred at any width. Labels are set in Cinzel for the bookplate register.
Brass legends on a slate tray; the chosen label sits in a chiselled well — a dark inset shadow on its top-left, a faint highlight on the far lip, letters with a hard engraving shadow. The port adds a small brass indicator lamp per well so the state doesn't depend on reading depth alone.
