70 Tailwind CSS Collections
Every collection written with Tailwind utility classes, built and tested against Tailwind v4. Each demo runs in the browser with no build step, so you can see it work before you copy it. Most have a hand-written CSS twin you can switch to on the demo page.
Prefer Plain CSS? Every collection is listed there too.
Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time
Untitled UI React · Affiliate link
UI Components20
All UI Components →
25 Tailwind CSS Button Groups
18 hand-coded Tailwind CSS button groups for SaaS pricing toggles, dashboard tab bars, rich-text editor toolbars, AI model pickers and Web3 wallet selectors. Covers split buttons with popover and details dropdowns, iOS-style segmented controls with sliding thumbs, monthly/yearly billing switches, pill filters, multi-select tag chips, radio export-format pickers, floating action speed dials, hold-to-confirm actions and cursor-following spotlight glows.
18 Tailwind CSS Forms
18 hand-coded Tailwind CSS forms for contact and support pages, SaaS sign-up and book-a-demo flows, e-commerce checkout and returns, fintech and insurance lead-gen, healthcare patient intake, mortgage pre-qualification and legal consultation requests. Covers character-counter textareas, password-strength meters, card-preview checkout, address autocomplete, inline-to-stacked newsletter signups, NPS surveys, multi-step job and quote wizards, avatar uploads, preset donation amounts, and linked slider-and-number inputs.
15 Tailwind CSS 3D Tilt Hover Cards
15 Tailwind CSS 3D tilt hover cards for D2C product spotlights, SaaS pricing rows, agency team and mascot cards, streaming music players, FinTech KPI dashboards, real-estate listings, and app-landing phone mockups — spanning parallax hover, glassmorphism and holographic foil, cursor-following border glow, spring physics, click-to-flip, and a zero-JavaScript :has() variant. Scoped under .ttc-NN for no-collision pasting, prefers-reduced-motion guarded, framework-agnostic.
21 Tailwind CSS Pricing Tables
21 Tailwind CSS pricing tables for SaaS plans, product suites, and per-seat billing: monthly/annual toggles, USD/GBP/EUR/AUD currency switchers, expandable feature comparisons, dark-mode themes, 3D flip cards, per-seat and bundle calculators, tabbed and stacking-accordion layouts, usage meters, glassmorphism and neumorphic styling, animated border beams, corner ribbons, mobile swipe carousels, and skeleton loading shimmers. Semantic HTML, appearance-none inputs, copy-paste ready.
24 Tailwind CSS Radio Buttons
Selectable plan cards and pricing selectors, iOS-style segmented controls and billing toggles, settings-page option rows with icons and descriptions, e-commerce color swatches and image pickers, star ratings, payment-method lists, and avatar profile selectors. Built on appearance-none native inputs with accessible focus rings, plus ripple, ink-splash, liquid-wave, 3D sphere, tilt-card, neon, gradient-border, and pulsing-glow animation styles.
29 Tailwind CSS Checkboxes
Selectable pricing plan cards and e-commerce filter chips built from has-checked, iOS-style toggle switches for SaaS settings, a no-JavaScript FAQ accordion, indeterminate "select all" tri-state masters, and WCAG-accessible focus rings. Covers to-do strikethroughs, dark-mode sun/moon and aurora toggles, plus animated SVG checkmark draws, liquid fill, gooey blob, confetti burst, ripple, neon glow, glassmorphism, neumorphism, brutalist, and 3D flip styles.
28 Tailwind CSS Close Buttons
Floating chat widget dismissals, cookie consent bars, modal and drawer close buttons, video and lightbox overlays, ad banners, and toast notifications — 28 close buttons covering the full range. Includes the corner-X modal pattern, WCAG focus rings, 48px tap targets, hamburger-to-X morphs, native dialog drawers, rotate-on-hover and magnetic-cursor motion, hold-to-confirm rings, neumorphic and brutalist styling, plus goo, glitch, particle burst, and galaxy vortex effects.
16 Tailwind CSS Floating Label Inputs
Floating label inputs for sign-up forms, login screens, checkout address grids, and settings panels. Covers the pure Tailwind peer pattern, Material Design outlined and filled fields, validation states with error and success messages, icon-inside inputs, select-dropdown and auto-growing textarea labels, a password show/hide toggle, Chrome autofill fixes, dark mode via light-dark(), ARIA/WCAG accessibility, and a mobile no-zoom container-query layout.
23 Tailwind CSS Flip Cards
23 Tailwind CSS flip cards for e-commerce product and pricing comparisons, meet-the-team reveals, language flashcards, trivia quizzes, gaming trading cards, business cards, and event tickets — spanning hover, tap, and keyboard triggers, <code>rotateY</code>/<code>rotateX</code> axes, diagonal <code>rotate3d</code> twists, book-open unfolds, and no-3D <code>clip-path</code> reveals. Scoped under .tfc-NN for no-collision pasting, <code>prefers-reduced-motion</code> guarded, framework-agnostic.
47 Tailwind CSS Toggles & Switches
47 Tailwind CSS toggles & switches for theme and dark-mode switchers, SaaS pricing monthly/annual pills, iOS settings rows, permission and battery-saver panels, and power controls. Patterns include appearance-none checkboxes, gooey SVG-filter morphs, neumorphic and glassmorphism tracks, conic countdown rings, slide-to-confirm and press-and-hold guards, three-position Off/Auto/On selectors, rotary knobs, split-flap flips, indeterminate master toggles, and role=switch buttons.
17 Tailwind CSS Range Sliders
17 Tailwind CSS range sliders for e-commerce price filters, media seekbars, audio equalizers, thermostat dials, loan calculators, and password strength meters — spanning dual-handle, vertical, circular, and centre-origin tracks in neumorphic, neon, glassmorphism, and liquid-glass styles with pop-up value bubbles. Scoped under <code>.trs-NN</code> for no-collision pasting, <code>prefers-reduced-motion</code> guarded, framework-agnostic.
36 Tailwind CSS Modals
36 Tailwind CSS modals for auth and password reset, paywalls and subscribe walls, product quick-views and cart drawers, age gates and GDPR consent, delete confirmations and support forms, plus a ⌘K command palette — spanning native <code><dialog></code> overlays, <code>:has()</code> and <code>:target</code> zero-JS state machines, slide-over drawers, bottom sheets, and radio-driven tabs. Scoped under <code>.tm-NN</code> for no-collision pasting, <code>prefers-reduced-motion</code> guarded, framework-agnostic.
30 Tailwind CSS Login Forms
30 Tailwind login forms spanning split-screen brand heros, floating-label and OAuth social sign-in, passwordless magic-link and Web3 wallet-connect grids, multi-tenant workspace switchers, glassmorphism and aurora-glow cards, terminal CLI and neo-brutalist styles, plus sliding login/sign-up panels, 3D flip password-reset, OTP code grids, PIN pads, password strength meters, show/hide toggles, and inline user-valid validation for fintech, SaaS, and secure-vault auth.
51 Tailwind CSS Buttons
Restaurant recipe cards, SaaS primary and destructive actions, and e-commerce add-to-cart flows all ride on the button. This set covers form submit and primary/secondary pairs, ghost outlines, icon-only tooltip toolbars, gradient and neon CTAs, loading and download-progress state machines, segmented radio groups, like and confetti micro-interactions, inline confirm-delete, play/pause morphs, and tactile material studies from brushed brass to frosted glass, clay, walnut, and punch-card 3D tilt.
20 Tailwind CSS Cards
Restaurant recipe indexes, SaaS pricing rows, e-commerce product grids, real estate listings, and dark analytics dashboards all lean on card layouts. This set covers hover quick-add product tiles, three-tier pricing with a lifted popular plan, cook-time meta grids, walk-score rings, photo-mosaic booking panels, ranked article feeds, testimonial sentiment strips, KPI sparklines, glassmorphism aurora stages, 3D flip and pop-out lifts, rotating conic borders, and a focus-within stacked cascade.
18 Tailwind CSS Product Cards
18 Tailwind CSS product cards for e-commerce catalogs, fashion and gadget shops, food delivery, and real estate listings — hover-reveal add-to-cart, 3D flip and tilt, image zoom, glassmorphism, neon borders, colourway and size pickers, quantity steppers, and favourite toggles. Scoped under <code>.tpc-NN</code> for no-collision pasting, <code>prefers-reduced-motion</code> guarded, framework-agnostic.
20 Tailwind CSS Custom Selects
Country picker with flag icons, currency and credit-card-type selectors, avatar profile and workspace switchers, language switcher, dark-mode theme selector, multi-select tag dropdowns with chips, status filter badges, date-range period pickers, product sorting, font-family preview pickers, color swatch and file-type selectors, plus floating-label fields, sliding highlight bars, spring open transitions, and a frosted glassmorphism select. Zero-JS state, accessible keyboard nav, semantic markup.
28 Tailwind CSS Input Fields
28 Tailwind CSS input fields covering floating labels, underline-sweep and drawn-border focus effects, frosted-glass and neon-glow styling, and the Material notched outline. Practical form controls include OTP code entry, password strength meters and reveal toggles, tag-chip and email-suggestion comboboxes, search with clear, phone-with-country and currency fields, file drop zones, steppers, range sliders, auto-grow textareas, inline edit, and credit-card formatting.
36 Tailwind Stacked Cards
Browse 36 Tailwind stacked cards with live demos and copy-paste code. Scroll-driven card stacks, swipe decks, fan-out photo piles, 3D flip cards.
20 Tailwind SVG Stroke Buttons
Browse 20 Tailwind SVG stroke buttons with live demos and copy-paste code. Stroke-dashoffset draw-on-hover, pathLength normalization, gradient strokes.
Motion & Effects7
All Motion & Effects →
30 Tailwind CSS Text Hover Effects
30 hand-coded Tailwind CSS text hover effects for marketing hero headlines, agency navigation, editorial indexes and product wordmarks. Covers animated underlines, gradient and liquid bg-clip-text fills, glitch and scramble decrypt, neon flicker, metallic shimmer, 3D pop and perspective tilt, staggered letter waves, spotlight and cursor-following shadows, blur-to-focus, variable font weight, marquee tickers, SVG water ripple and clip-path reveals.
20 Tailwind CSS Text Gradient
20 hand-coded Tailwind CSS text gradient effects for landing-page hero headings, image-free navbar wordmarks, active nav links, gradient CTA and gradient-border buttons, and editorial type specimens. Covers animated moving gradients, glowing Web3 neon, metallic gold, cyberpunk HUD, pastel and rainbow multi-color fills, radial and vertical gradients, gradient text on glass, outline-stroke combinations, multiline paragraph wrapping, a bg-clip-text utility cheat sheet, an @supports fallback, and a dark-mode toggle.
30 Tailwind CSS Hover Effects
30 Tailwind CSS hover effects for editorial links and navigation, marketing CTAs and add-to-cart buttons, product and profile cards, and image galleries — spanning underline draws, glitch and neon text, magnetic liquid and 3D-press buttons, tilt and flip cards, zoom-pan and duotone images, and cursor-trail motion. Scoped under <code>.thv-NN</code> for no-collision pasting, <code>prefers-reduced-motion</code> guarded, framework-agnostic.
36 Tailwind CSS Button Hover Effects
Restaurant recipe cards, SaaS hero CTAs, and e-commerce add-to-cart flows all live or die on the button. This set of button hover effects covers sliding background wipes, center underline draws, minimalist outline strokes, conic and rainbow gradient border spins, liquid wave and organic blob fills, neon pulse glows, cursor-tracking spotlights, magnetic ripple attraction, glitch slices, 3D flip and plunger presses, kinetic text flips, icon slide-ins, particle bursts, and typewriter retype states.
33 Tailwind CSS Card Hover Effects
33 Card hover effects for portfolio grids, SaaS pricing tiers, product shops, team profiles, and fintech account cards. This set covers 3D tilt and parallax with depth layers, front-to-back and book-cover flips, image-zoom slide-up reveals, sibling de-emphasis pricing grids, animated conic gradient borders, holographic foil shimmer, cursor spotlight and shockwave ripples, RGB channel-split glitch, curtain and corner-peel reveals, neon sign and CRT scanline terminals, and drifting aurora ribbons.
20 Tailwind CSS Animated Buttons
Restaurant recipe cards, SaaS hero CTAs, e-commerce add-to-cart flows, and slider controls all lean on button motion. This set covers neon glow halos, four-direction background-slide fills, no-JS Material ripples, animated border draws, 3D keycap press depth, liquid wave fills, moving gradients, shine sweeps, jelly bounce squash, 3D text flips, hamburger-to-close morphs, flying-dot cart adds, peer-checked toggles, checkmark-draw submit states, download progress fills, and cursor-aware ghost reveals.
20 Tailwind CSS Image Hover Effects
20 image hover effects in Tailwind CSS for portfolio grids, e-commerce product cards, team pages, and photo galleries: contained zoom, gradient overlay text reveal, product image cross-swap, slide-up captions, grayscale-to-color, blend-mode tints, neumorphic and glassmorphism cards, neon glow borders, clip-path morphs, pointer-tracked 3D tilt, glare sweeps, ripple rings, spinning avatar arcs, and a three-layer 3D card flip.
Layouts12
All Layouts →
18 Tailwind CSS Settings Pages
18 hand-coded Tailwind CSS settings pages for SaaS dashboards, billing, and team administration. Covers section-nav account layouts, plan and seat billing summaries, usage quota meters with conic-gradient rings, invoice history tables, payment-method cards, roles and permissions matrices, teammate invite flows, API key management, two-factor setup, active-session lists, notification preference grids, theme panels, connected-app directories, data export, audit logs, and danger-zone delete sections.
22 Tailwind CSS Feature Sections
22 hand-coded Tailwind CSS feature sections for SaaS marketing pages, developer tools, and enterprise landing pages. Covers tabbed product tours, alternating image rows, stat counters, problem-vs-solution splits, integration logo grids, accordion feature cards, plan comparison columns and tables, security compliance badges, API code blocks, sticky scroll storytelling, icon and bento grids, dark glassmorphism, scroll-reveal cards, 3D tilt cards, phone mockups, and vertical timelines.
31 Tailwind CSS Hero Sections
31 hand-coded Tailwind CSS hero sections for SaaS marketing pages, developer tools, mobile app launches, e-commerce product drops and editorial magazine covers. Covers split layouts with dashboard mockups, animated gradient mesh and conic-ring backgrounds, glassmorphism aurora cards, staggered word and kinetic-letter reveals, bento grids, before/after comparison sliders, parallax landscapes, terminal windows, brutalist and neon-cyberpunk styles, starfields, glitch text and mouse-tracking liquid-glass lenses.
17 Tailwind CSS Dashboard Layouts
17 hand-coded Tailwind CSS dashboard layouts for SaaS admin panels, analytics consoles, e-commerce merchant dashboards and AI copilot apps. Covers bento grids, collapsible icon-rail sidebars, KPI stat-card grids, master-detail inbox splits, fixed-header independent scroll panels, grid-template-area shells, off-canvas drawers, container-query cards, dark/light/system toggles, multi-level nested navigation, sticky-header data tables, masonry column packing, full-screen 100vh consoles and top-nav tab bars.
5 Tailwind CSS Ways to Center Div
5 Tailwind CSS ways to center a div: flexbox with items-center and justify-center for both axes, grid place-items-center in two classes, absolute positioning with inset-0 or translate over a glass UI, mx-auto with a max-w container for inline-axis centering, and a side-by-side board comparing all six methods with their trade-offs.
12 Tailwind CSS Full Page Sections
12 Tailwind CSS full-page section layouts for SaaS landing pages, product feature showcases, portfolios, and agency storytelling sites. Covers scroll-snap full-viewport panels sized with 100dvh, a JavaScript-free one-page scroller, scroll-snap-stop to prevent skipping, sticky stacking cards, frosted dot-rail navigation, scroll-spy active links without JavaScript, parallax and reveal-and-scale scroll-driven animations, horizontal scroll-snap chapters, and an accessible keyboard-navigable variant with reduced-motion support.
22 Tailwind CSS Headers
22 Tailwind CSS headers for SaaS apps, docs sites, storefronts, and marketing pages. Covers command-palette search with a ⌘K shortcut, workspace and version switchers, e-commerce cart and mega-menu clusters, sticky and shrinking scroll headers, a reading-progress bar, transparent-over-hero and glassmorphism surfaces, notification dropdowns, breadcrumb and two-row layouts, a collapsible sidebar, multi-level dropdowns, a full-screen hamburger overlay, a dismissible announcement bar, and five nav-link hover styles.
30 Tailwind CSS Grid Layouts
30 Tailwind CSS grid layouts for editorial features, docs pages with sticky tables of contents, photo galleries, bento product sections, analytics dashboards, pricing tables, and kanban boards — spanning holy-grail and 12-column page systems, masonry and mosaic photo walls, subgrid-aligned cards, container-query teasers, scroll-snap carousels, and dense auto-packed asset libraries. Scoped under .tgx-NN for no-collision pasting, prefers-reduced-motion, guarded, framework-agnostic.
30 Tailwind CSS Sidebar Layouts
30 Tailwind CSS sidebar layouts for SaaS dashboard shells, admin consoles, documentation trees, and webmail two-pane inboxes — spanning fixed and sticky rails, collapse-to-icon and off-canvas drawers, dual-panel and three-pane workspaces, nested <code><details></code> file trees, and floating glassmorphism panels. Scoped under <code>.tsl-NN</code> for no-collision pasting, <code>prefers-reduced-motion</code> guarded, framework-agnostic.
14 Tailwind CSS Wave Section Dividers
Restaurant menu cards, SaaS and agency landing-page heroes, and dark-footer transitions all lean on wave section dividers to soften the seam between two colour blocks. This set covers inline SVG paths, reusable masks, seamless animated tiles that scroll sideways, clip-path cuts with no SVG at all, stacked multi-colour layers, inverted concave dips, sine-accurate curves, gradient-masked edges, asymmetric organic shapes, dark-mode colour matching, photo overlays, and a vertical seam for sidebars — plus the responsive mobile-gap fix.
21 Tailwind CSS Pricing Sections
Pricing sections for SaaS marketing pages and product landing pages, spanning three-tier layouts, a highlighted popular tier, a full feature comparison table, and single-product premium cards. Includes zero-JS monthly/yearly and currency toggles, a usage-slider estimator, per-seat and pay-what-you-want calculators, bento and timeline arrangements, feature accordions built on details, plus glass, brutalist, synthwave, conic-border, and cursor-spotlight treatments.
15 Tailwind Card Grid Layouts
Browse 15 CSS Tailwind card grid layouts with live demos and copy-paste code. Auto-fit blog archives, masonry walls, bento boxes, pricing grids. Mobile-first.
Navigation14
All Navigation →
32 Tailwind CSS Accordions — Vertical & Horizontal
32 hand-coded Tailwind CSS accordions for pricing-page FAQs, mobile navigation menus, product filter sidebars, documentation trees and product changelogs. Covers native details and summary disclosure, smooth height transitions, exclusive single-open behavior, rotating chevron and plus-minus icons, nested tree views, numbered onboarding steps, circular progress rings, timelines, 3D paper folds, and horizontal accordions from image galleries and feature sections to album shelves and cinematic film strips.
32 Tailwind CSS Tabs
32 hand-coded Tailwind CSS tabs for documentation sites, SaaS dashboards, settings panels, mobile app shells and type specimens. Covers sliding underline and SVG-drawn indicators, iOS segmented controls, VS Code file tabs, vertical timeline tabs, sliding pill and icon tabs, bento card tabs, bottom navigation bars, variable font-weight contrast, and expressive print styles from Bauhaus color blocks to risograph and stencil plates.
15 Tailwind CSS Navigation Menus
15 hand-coded Tailwind CSS navigation menus for site headers, documentation bars, admin dashboards, portfolios and mobile apps. Covers animated hover-underline navbars, hover and keyboard-accessible dropdowns, mega menus, slide-out hamburger drawers, full-screen overlay menus, shrink-on-scroll sticky headers, collapsible icon-rail sidebars, sliding tab indicators, breadcrumb styles, glassmorphism bars, mobile bottom docks, multi-level accordion sidebars, magnetic hover links, neon glow bars and spring-animated pill indicators.
17 Tailwind CSS Side Menus
17 hand-coded Tailwind CSS side menus for app shells, documentation sites, admin dashboards and mobile navigation. Covers slide-in drawers with animated hamburgers, blurred backdrop overlays, off-canvas push layouts, hover-expand icon rails, sticky full-height sidebars, nested accordion trees, neumorphism and glassmorphism surfaces, cyberpunk neon and brutalist styles, checkbox-hack and toggle-button collapse with no JS, and a macOS glass dock with a sliding highlight.
25 Tailwind CSS Sticky Navigations
250-540 chars. Let me trim.\n\n25 hand-coded Tailwind CSS sticky navigations for SaaS headers, documentation sites, e-commerce storefronts and mobile apps. Covers no-JS sticky navbars, flexbox three-zone headers, hamburger drawers, floating glass pills with backdrop blur, shrink-on-scroll and hide-on-scroll headers, transparent-to-solid hero bars, reading progress indicators, mega menus, storefront search with cart badges, scrollspy pills and mobile bottom tabs.
20 Tailwind CSS Mega Menus
20 hand-coded Tailwind CSS mega menus for site headers, documentation bars, e-commerce department navigation, SaaS dashboards and editorial mastheads. Covers focus-within panels, hover-intent delays, safe-triangle tracking, subgrid columns, viewport edge positioning, Escape-to-dismiss with focus return, arrow-key navigation, ARIA disclosure semantics, @starting-style animations, featured article images and product-finder filters.
16 Tailwind CSS Mobile Navbars & Menus
16 hand-coded Tailwind CSS mobile navigation components for app bottom tabs, hamburger drawers, full-screen overlay menus, FABs and command palettes. Covers slide-out drawers, clip-path reveal menus, iOS frosted tab bars, radial FAB fan-outs, swipeable sidebars, speed-dial menus, sliding-pill indicators, glassmorphism and neon overlays, swipe carousels, collapsible breadcrumbs and Cmd+K palettes.
11 Tailwind CSS Glassmorphic Navbars
11 hand-coded Tailwind CSS glassmorphic sticky navbars for SaaS landing pages, portfolios, dark-mode cyberpunk sites and Next.js App Router apps. Covers floating frosted-glass headers over gradient heroes, transparent bars that frost on scroll, neon-glow smoked glass, detached floating pill navbars, glass mega menus and dropdowns, hamburger off-canvas drawers, zero-JS backdrop-blur sticky headers, animated conic-gradient borders, WCAG AA accessible fills and Framer Motion React headers.
39 Tailwind CSS Breadcrumbs
39 Tailwind CSS breadcrumb trails for e-commerce faceted navigation, docs sites, multi-step checkout wizards, marketplace filters, and dashboards. Includes schema.org Microdata trails, collapsing container-query bars, removable filter chips, dropdown sibling menus, clip-path arrow and chevron shapes, glassmorphism and neumorphic pills, gradient-text and animated underline links, isometric layered tiles, truncated mobile trails, and numbered step indicators. Light and dark themes, keyboard-accessible, semantic markup.
20 Tailwind CSS Sidebars
Sidebar navigation patterns for admin dashboards, chat and messaging apps, docs sites, and app shells: an accessible ARIA nav reference, focus trap with restore-on-close, inert background content behind drawers, collapsible icon rails announcing expanded state, roving tabindex, persisted collapse across reloads, overscroll containment, nested details/summary submenus, keyboard-resizable and responsive drawers, sticky full-height layouts, footer pinning, and current-page state.
20 Tailwind CSS Responsive Navbars
20 Tailwind CSS responsive navbars spanning frosted glassmorphism sticky bars, three-column mega menus, off-canvas sidebar and vertical rail drawers, animated underline tabs, floating glass pills and multi-segment islands, scroll-aware shrink headers, neon dark chrome, split two-tone and centered-logo layouts, iOS-style bottom tab bars, full-screen overlay menus, morphing search fields, breadcrumb progress and step wizard headers, dual announcement stacks, and IntersectionObserver scroll-spy highlights.
22 Tailwind Dropdown Menus
22 Tailwind dropdown menus for site navigation, mega menus, and app UI — hover slide-downs, clip-path and 3D-flip reveals, glassmorphism and staggered panels, four-column and split-screen mega menus, zero-JS <code><details></code> builds, nested multi-level flyouts, command palettes, and custom selects. Scoped under <code>.tdd-NN</code> for no-collision pasting, <code>prefers-reduced-motion</code> guarded, framework-agnostic.
28 Tailwind Hamburger Menus
28 Tailwind hamburger menus for mobile navigation, app drawers, and responsive navbars. Covers slide-in off-canvas drawers with dimmed backdrops, checkbox-hack and :has() menus with no JavaScript, animated 3-line to X icon morphs, full-screen overlays, push-page content shifts, slide-out sidebars, glassmorphism blur panels, native details accordions, bottom nav bars, and breakpoint-driven navbar toggles. Accessible, keyboard-navigable, copy-paste ready.
24 Tailwind Liquid Glass Navbars
iOS 26 floating tab bars, macOS Tahoe menu strips, visionOS frosted slabs, and Dynamic Island morphing pills — 24 Tailwind navigation bars built on the liquid glass look. Covers sticky scroll-to-frost headers, SVG refraction toolbars, sliding capsule tab bars with group-has, responsive burger menus, container-query sidebars that fold to bottom tabs, plus light/dark, high-contrast, and fallback-first variants. Semantic HTML, backdrop-filter, copy-paste ready.
UI Snippets10
All UI Snippets →
13 Tailwind CSS Tables
13 hand-coded Tailwind CSS tables for SaaS pricing comparisons, admin dashboards, shopping cart checkout, crypto price trackers, class timetables, and FDA nutrition labels. Covers responsive stack-into-cards layouts, sticky headers and pinned first columns, billing toggles, quantity steppers with live totals, status filter and sort controls, :has() row states with progress bars, zebra-striped glassmorphism, neumorphic soft-UI, and frosted-glass sticky headers.
22 Tailwind CSS Countdown Timers
22 hand-coded Tailwind CSS countdown timers for auth session timeouts, OTP resend throttles, flash sales, product launches, auction lots and delivery ETAs. Covers accessible ARIA live-region timers, a zero-JavaScript pure-CSS clock, circular SVG progress rings, rate-limit retry-after cooldowns, free-trial and maintenance status banners, virtual waiting-room queues, habit-streak midnight widgets, interval workout timers and a split-flap retro flip clock.
20 Tailwind CSS Empty States
20 hand-coded Tailwind CSS empty states for e-commerce carts, wishlists, inbox-zero mail clients, dashboards before their first data, and 404/403/500 error pages. Covers no-search-results screens with removable filter chips, onboarding setup checklists, empty data tables and dropdown panels, offline and access-denied pages, skeleton-to-empty transitions, an ARIA live-region accessible variant, a utility-drawn illustrated state with no images, a dark-mode dark: variant, and inline micro empty states.
20 Tailwind CSS Kbd Keys
20 Tailwind CSS keyboard key styles for documentation, shortcut cheat sheets, settings panels and command hints. Covers semantic kbd tag styling, 3D press-down keycaps, shortcut combos with plus separators, flat inline chips for body text, em-based responsive sizing, Mac/Windows toggles, arrow and navigation clusters, OS auto-detection, Cmd+K search hints, tooltip shortcut labels, keybinding settings tables, live key-press visualizers, plus neumorphic, glassmorphism, retro typewriter, terminal and dark-mode variants.
20 Tailwind CSS Popovers
Popover API show and hide with auto vs manual behavior, CSS anchor positioning with position-area placement and position-try flip fallbacks, tooltip arrows, anchor-width dropdowns, nested submenus, and a custom select listbox. Covers entry and exit animations, backdrop and light dismiss, accessible hover-and-focus tooltips, a profile menu, a date picker, a checkbox filter dropdown, popover vs dialog, glassmorphism and dark-mode styles, plus a fallback and polyfill for older browsers.
25 Tailwind CSS Blockquotes
25 Tailwind CSS blockquotes for article pull quotes, testimonial cards, docs callout admonitions, keynote quote banners, and social-post embeds. Covers giant decorative quotation marks, minimalist left-border rules, gradient and neon borders, glassmorphism and aurora backgrounds, brutalist cards, speech bubbles, highlighted mark text, newspaper multi-column layouts, expandable read-more clamps, a scroll-snap testimonial slider, and one-click copy.
25 Tailwind CSS FAQ Accordion
25 Tailwind CSS FAQ accordions for SaaS pricing pages, e-commerce product FAQs, help centres, and documentation hubs — spanning pure <code>peer</code> and native <code><details></code> toggles, exclusive and multi-open panels, chevron and plus-to-minus icon morphs, glassmorphism and neumorphic styling, search filters, voice search, ARIA keyboard navigation, and FAQPage JSON-LD. Scoped under .tfa-NN for no-collision pasting, <code>prefers-reduced-motion</code> guarded, framework-agnostic.
22 Tailwind CSS Image Gallery
22 CSS Tailwind image galleries for portfolio and photography sites, e-commerce product grids, editorial magazine spreads, and marketing lightboxes — spanning masonry and justified layouts, honeycomb and metro mosaics, scroll-snap filmstrips, :target lightboxes, 3D tilt and cube viewers, Ken Burns slideshows, and infinite marquees. Scoped under <code>.tgl-NN</code> for no-collision pasting, <code>prefers-reduced-motion</code> guarded, framework-agnostic.
21 Tailwind CSS Tooltips
21 Tailwind CSS tooltips and hover cards for developer toolbars and form fields, data tables and status dashboards, avatar mentions and org charts, and reference cards for glossaries, recipes, EXIF, and the periodic table — spanning pill tooltips with CSS arrows, staggered profile reveals, rarity-tinted item cards, and side-anchored hint popovers. Scoped under <code>.ttp-NN</code> for no-collision pasting, <code>prefers-reduced-motion</code> guarded, framework-agnostic.
22 Tailwind CSS Image Carousel
22 Tailwind CSS image carousels for e-commerce product galleries, full-screen hero slideshows, testimonial rails, logo marquees, streaming content rows, and before/after comparison sliders — spanning scroll-snap tracks, native scroll-button and scroll-marker controls, zero-JS state machines, 3D coverflow, and parallax transitions. Scoped under <code>.tcar-NN</code> for no-collision pasting, <code>prefers-reduced-motion</code> guarded, framework-agnostic.
Design Styles7
All Design Styles →
23 Tailwind CSS Dark Mode UI
23 hand-coded Tailwind CSS dark mode UI components for dashboards, settings panels, modals, login forms, code editors and reading layouts. Covers prefers-color-scheme defaults, data-theme and light-dark() overrides, color-mix() design tokens, three-state System/Light/Dark switchers, OLED true-black and warm mocha themes, elevation layers, sidebar navigation, sortable file tables, vertical timelines, glowing buttons, aurora gradient heroes and alert cards.
20 Tailwind CSS Claymorphism
20 Tailwind CSS claymorphism components for dashboards, pricing tables, mobile tab bars, app-icon grids, and product cards. Covers the 3-layer clay box-shadow recipe, squircle corner radii, glassmorphism hybrids, 3D press-and-squish buttons, inset well inputs and search bars, toggle switches and segmented controls, clay badges, popover-API modals, semantic toasts, dark-mode shadow recalibration with light-dark(), and GPU-transform performance tuning.
20 Tailwind CSS Minimalist UI
A collection of Tailwind CSS minimalist UI patterns for SaaS dashboards, ecommerce product cards, portfolios, article layouts, landing sections, and mobile app screens. Covers modular type scales from a ratio variable, single-ink hierarchy, system font stacks, optical alignment, spacing from one base unit, vertical rhythm, one-accent restraint, grayscale contrast ramps, removable borders, and tone-only elevation without shadows.
20 Tailwind CSS Grain Texture
Restaurant menu cards, SaaS hero backgrounds, and photographic overlays lean on grain to kill gradient banding and add tactile depth. Covers SVG feTurbulence noise, baseFrequency and numOctaves control, data-URI textures with no image request, mix-blend-mode composites, feColorMatrix tinting, anti-banding gradient heroes, vignette overlays, halftone and Bayer dither shading, letterpress and risograph print effects, woven fabric surfaces, and a reduced-motion static fallback.
14 Material Design Components in Tailwind CSS
14 Material Design components in Tailwind CSS covering Material 3 buttons and FABs, elevated and outlined cards, bottom navigation bars, rails and drawers, floating-label text fields, dialogs and bottom sheets, sortable data tables, tabs with a sliding indicator, filter chips, steppers, tooltips, expansion panels on the details element, list rows, a theme switcher, and a responsive app shell with a scroll-elevated top bar.
20 Tailwind Liquid Glass Effects
Browse 20 Tailwind liquid glass effects with live demos and copy-paste code. Frosted cards, gooey toggles, SVG displacement backgrounds, glossy buttons.
20 Tailwind Retro UI
Browse 20 Tailwind retro UI components with live demos and copy-paste code. CRT scanlines, Windows 95 chrome, pixel art buttons, vaporwave grids.