Radio Card Selector
Tailwind CSS plan picker that turns native radio inputs into selectable pricing cards with a check indicator, focus ring and live summary.
All components
Browse free, copy-paste UI components built with HTML, CSS and JavaScript.
200 component(s)
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.
Inputs with Icons and Add-ons
Tailwind CSS input group examples with leading icons, text prefixes and suffixes, a currency select, password toggle, clear button and helper text.
Contact Form Card
Tailwind CSS contact form card with a topic select, live character counter and meter, inline validation and a simulated sending state.
Comment Thread
Nested Tailwind CSS comment thread with threaded replies, like toggles, inline reply forms and a new comment form, built with accessible vanilla JavaScript.
Kanban Board with Drag and Drop
Dark Tailwind CSS kanban board with three task columns, native drag and drop, keyboard move buttons, live counters and screen reader announcements.
Profile Card with Cover
Tailwind CSS profile card with a gradient cover, overlapping avatar, verified badge, bio, skill chips, stats and an accessible follow toggle.
Gallery with Lightbox
Tailwind CSS mosaic image gallery that opens an accessible lightbox with captions, arrow-key and swipe navigation, focus trap and preloading.
Image Carousel with Thumbnails
Tailwind CSS image carousel with a clickable thumbnail strip, captions, swipe support, arrow-key navigation and optional looping.
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.
Vertical Timeline
Responsive Tailwind CSS vertical timeline with icon markers, dates, category labels and descriptions that alternate left and right on wider screens.
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.
List with Avatars and Actions
Dark Tailwind CSS user list with initials avatars, online status, meta details and accessible Follow toggle buttons with a live counter.
Blog Post Card
Tailwind CSS blog post card with cover illustration, category badge, date, reading time, clamped excerpt, author row and a fully clickable area.
Mobile Bottom Tab Bar
Fixed Tailwind CSS bottom tab bar with icons, labels, an active pill, an unread badge, safe-area padding and optional hide-on-scroll.
Slide-In Mobile Menu
Tailwind CSS off-canvas mobile menu that slides in from the left with a backdrop, focus trap, Escape to close and an expandable submenu.
Products Mega Menu
Tailwind CSS mega menu with two columns of product links, icons and descriptions, a featured promo card and full keyboard support.
Collapsible Dashboard Sidebar
Dark Tailwind CSS dashboard sidebar with icons, grouped sections, an unread badge and a button that collapses it to an icon rail with tooltips.
Multi-Column Footer
Dark Tailwind CSS website footer with brand block, social icons, four labelled link columns and a bottom bar with copyright and status.
Article with Table of Contents
Tailwind CSS long-form article layout with a sticky table of contents that highlights the current section and shows reading progress.
Blog Post Grid
Responsive three-column Tailwind CSS blog grid with illustrated covers, category badges, author, date, reading time and fully clickable cards.
Newsletter Signup Card
Bold Tailwind CSS newsletter signup card with inline email validation, a loading spinner, privacy note and an animated success state.
Split Contact Section with Form
Tailwind CSS contact section with a gradient info panel beside a validated contact form, topic chips, character counter and a simulated send state.