Full-Page Loader
Tailwind CSS full-page loader overlay with a spinning gradient ring, progress bar and status messages that fades out once the page has loaded.
All components
Browse free, copy-paste UI components built with HTML, CSS and JavaScript.
80 component(s)
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.
Segmented Control
Tailwind CSS segmented control with a sliding thumb, built on native radio inputs for single-choice view, range and billing toggles.
Button Variants
Tailwind CSS button set with primary, secondary, outline, ghost, danger and link variants, five sizes, icon buttons, loading and disabled states.
Onboarding Wizard
Tailwind CSS onboarding wizard with step indicator, progress bar, radio cards, topic chips, validation and an editable summary before finishing.
Rating Summary with Bars
Tailwind CSS review summary with an average score, partial star fill and clickable rating distribution bars that filter reviews.
Command Palette Search
Dark Tailwind CSS command palette opened with Ctrl+K: live filtering with match highlights, grouped results and full keyboard navigation.
Date Picker Dropdown
Accessible Tailwind CSS date picker: a text input with a calendar popup, keyboard grid navigation, locale-aware labels and min/max dates.
File Upload Dropzone
Tailwind CSS drag-and-drop file upload zone with keyboard support, type and size validation, a file list and per-file progress bars.
Month Calendar with Events
Tailwind CSS month calendar with colored event pills, today highlight, prev/next navigation, keyboard support and a day agenda.
Stat Cards with Trend
Tailwind CSS KPI stat cards with change percentage pills and animated SVG sparklines generated from a data attribute.
Badges and Tags Collection
Dark Tailwind CSS badge collection: color pills, status dots, notification counters, icon badges and removable tags with an add-tag input.
Avatar Group
Overlapping Tailwind CSS avatar stack in three sizes with initials, status dots, name tooltips and a +N counter that reveals hidden people.
Dual Range Price Slider
Tailwind CSS min/max price slider with two handles, synced number inputs and a live histogram that counts products in the selected range.
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.
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.