System, Light and Dark Theme Dropdown
Accessible Tailwind CSS dropdown to choose a light, dark or system theme, with live OS sync, saved preference and CSS variable tokens.
Tag: accessible
Components tagged with "accessible".
25 component(s)
Tabs with Photo Preview Panels
Tailwind CSS feature tabs that swap a large photo preview with a caption for each selected tab, with full keyboard support.
Settings Toggles with Description
Tailwind CSS settings panel with accessible switches, label descriptions, a locked required option, restore defaults and an auto-save status message.
Hover and Focus Dropdown
Dark navbar with pure CSS dropdown menus that open on hover and keyboard focus, plus a small vanilla JS layer for Escape, arrow keys and touch taps.
Mini Calendar
Compact month calendar generated with vanilla JS and styled with pure CSS: selectable days, today marker, month navigation and full arrow-key support.
Back to Top Button with Scroll Progress
Round back-to-top button with an SVG ring that fills as you scroll, a percentage label and smooth scrolling, for the page or any scroll container.
Pure CSS Tooltips
JavaScript-free tooltips driven by data attributes, with top, right, bottom and left placement, arrows, color tones and hover or focus triggers.
Icon Buttons with Ripple
Round icon buttons with a Material-style ripple, toggle states and tooltips: standard, filled, tonal and outlined variants in three sizes.
Star Rating Input
Accessible pure CSS star rating input with half stars, built on native radio buttons, hover preview and a live value label.
Animated Pill Tabs
Segmented pill tabs with a sliding, springy background, ARIA tabs keyboard support and fading panels, shown on an analytics card. Pure CSS and vanilla JS.
Arrow Breadcrumbs
Chevron-shaped breadcrumb steps cut with CSS clip-path, with an interlocking layout, a color ramp toward the current page and a compact dark variant. No JavaScript.
Icon Buttons with Tooltips
Accessible Tailwind CSS icon buttons with tooltips as labels, toggle states, a keyboard-friendly toolbar, a navigation rail and Escape to dismiss.
Dropdown Menu with Icons
Accessible Tailwind CSS menu button with icons, grouped items, dividers, shortcut hints, typeahead and full arrow-key navigation.
Searchable Select
Accessible Tailwind CSS combobox that filters options as you type, highlights matches and supports full keyboard navigation.
Plus/Minus Accordion
Tailwind CSS accordion with a rotating plus/minus icon, smooth height animation, keyboard navigation and a switch for single-open or multi-open mode.
Sortable Data Table
Tailwind CSS data table with clickable column headers that sort text, dates and numbers, with aria-sort, arrow indicators and a responsive scroll wrapper.
FAQ Accordion Section
Dark Tailwind CSS FAQ section with an accessible accordion, smooth expand animation, keyboard navigation and a support contact card.
Underline Tabs
Accessible Tailwind CSS tabs with a sliding underline indicator, arrow-key and Home/End navigation, count badge and scrollable tab bar on mobile.
Pagination with Results Info
Tailwind CSS pagination bar with Previous/Next, numbered pages with ellipsis, a per-page select and a live 'Showing 1 to 10 of 97 results' summary.
Rounded Pagination
Pill-shaped pagination with ellipsis, previous/next buttons and a gradient active page, made interactive with a few lines of vanilla JS.
Login Form with Social Buttons
Tailwind CSS login form with Google and GitHub buttons, remember me, password visibility toggle and accessible inline validation.
Modal Dialog
Accessible Tailwind CSS modal dialog with focus trap, Escape and backdrop close, scroll lock and a type-to-confirm delete action.
Navbar with Centered Logo
Dark Tailwind CSS navbar with links split around a centered logo, animated underlines and an accessible slide-down mobile menu.
Navbar with Dropdown and Mobile Menu
Tailwind CSS navbar with an accessible dropdown, call-to-action buttons and a collapsible mobile menu.