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.
All components
Browse free, copy-paste UI components built with HTML, CSS and JavaScript.
80 component(s)
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.
FAQ Accordion Section
Dark Tailwind CSS FAQ section with an accessible accordion, smooth expand animation, keyboard navigation and a support contact card.
Logo Cloud Grid
Tailwind CSS logo cloud with a heading and a bordered grid of eight inline SVG client logos that reveal brand colors on hover.
Stats Section with Count-Up Numbers
Tailwind CSS key-metrics section on an emerald brand background with large numbers, labels, trend notes and an accessible count-up on scroll.
Centered Hero with Announcement Badge
Dark Tailwind CSS hero section with an announcement pill, gradient headline, two CTA buttons, glowing grid background and a row of trust logos.
Horizontal Progress Stepper
Tailwind CSS horizontal stepper with numbered circles, animated connector lines, completed/current/upcoming states and Back/Continue controls.
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.
Team Grid
Dark Tailwind CSS team section with portrait photos, roles, short bios, accessible social links and a hiring card.
Testimonials Grid
Masonry-style Tailwind CSS testimonials grid with star ratings, initial avatars and an accessible Show more button.
Call to Action Banner
Bold full-width Tailwind CSS call-to-action band with a gradient background, two buttons and reassurance points.