FAQ Accordion Section
Dark Tailwind CSS FAQ section with an accessible accordion, smooth expand animation, keyboard navigation and a support contact card.
All components
Browse free, copy-paste UI components built with HTML, CSS and JavaScript.
200 component(s)
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.
Feature Grid with Icons
Responsive Tailwind CSS feature section with six features, inline SVG icons, hairline dividers and a subtle hover accent.
Rounded Pagination
Pill-shaped pagination with ellipsis, previous/next buttons and a gradient active page, made interactive with a few lines of vanilla JS.
Animated 404 Page
Playful full-page 404 error template with a floating planet, short message, site search field and home link in pure CSS.
CSS Spinner Collection
Eight lightweight pure CSS loading spinners in a labelled grid, each with role="status" and screen reader text, no JavaScript.
3D Flip Card
Three pure CSS 3D flip cards that turn on hover, keyboard focus or tap to reveal details and a link on the back.
Horizontal Card
Three Bootstrap 5 horizontal cards with the image on the left: an article card, a listing card with rating and price, and a compact course card.
Contact Form with Validation
Bootstrap 5 contact form with floating labels, client-side validation, a character counter, a success message and a contact details panel.
Hero with Signup Form
Bootstrap 5 two-column hero with value points, social proof and a validated signup card that shows a loading state and a success message.
Transparent Navbar that Turns Solid on Scroll
Bootstrap 5 navbar that sits transparently over a gradient hero and becomes a solid, blurred bar with a shadow when the page scrolls.
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.
Split Hero with App Screenshot
Dark Tailwind CSS split hero with gradient headline, two CTA buttons and an animated mock app dashboard built entirely from divs.
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.