Maintenance Page with Animated Gears
Dark full-page scheduled maintenance notice with interlocking SVG gears, a live countdown, progress bar and task checklist in pure CSS and vanilla JS.
Tag: dark
Components tagged with "dark".
29 component(s)
Circular Progress Indicator
SVG ring progress indicators with an animated fill, count-up percentage, glow colors and a slider-driven demo ring with color thresholds.
Gradient Buttons
Pure CSS gradient buttons with shifting colors on hover, a gradient outline, glow and shine effects, sizes and a disabled state.
Neon Glow Profile Card
Dark profile card with an animated neon conic-gradient border, soft glow, stats, skill tags and a Follow toggle, built with pure CSS and vanilla JS.
Table with Sticky Header
Dark striped data table in pure CSS with a sticky header row and sticky first column inside a scrollable, keyboard-focusable container.
Navbar with Sliding Active Indicator
Dark responsive navbar with a glowing underline that slides between links on hover, focus and click, built with CSS custom properties and vanilla JS.
Pricing Comparison Table
Dark Bootstrap 5 plan comparison table with grouped features, highlighted popular plan, sticky feature column, tooltips and a show-only-differences switch.
Social Media Post Card
Dark Bootstrap 5 social post card with photo, double-tap like, save, native share with copy-link fallback and an inline comment thread.
500 Server Error Page
Dark Bootstrap 5 500 error page with a server rack illustration, retry button, status page link, copyable reference ID and service status list.
Animated Progress Bars
Bootstrap 5 dark dashboard with labelled bars that fill on scroll, a striped animated build progress bar and a stacked storage bar.
Bootstrap Toast Stack
Bootstrap 5 toast notifications in a corner stack: success, info, warning and error buttons, selectable corner, auto-hide with a progress bar and a stack limit.
Delete Confirmation Modal
Dark Bootstrap 5 modal that confirms deleting an item by typing its exact name, with per-row triggers, a loading state and removal of the deleted row.
Editor Button Toolbar
Dark Bootstrap 5 text editor toolbar with grouped icon buttons, toggle states, a block style dropdown, arrow key navigation and a working editable area.
Password Strength Meter
Bootstrap 5 password input with show/hide toggle, four-step strength meter, live requirements checklist and confirmation match check.
Activity Feed Timeline
Dark Bootstrap 5 activity feed timeline with colored event icons, timestamps, quoted comments and filter chips for code, comments and deploys.
Footer with Newsletter
Dark Bootstrap 5 footer with a newsletter signup panel, email validation, social icons, three link columns and a legal bar.
Sidebar with Nested Collapsible Menu
Dark Bootstrap 5 sidebar with three-level collapsible menu groups, accordion behavior, active link highlight and an off-canvas panel on mobile.
Product Detail with Gallery
Dark Tailwind CSS product page section with a thumbnail image gallery, finish options, quantity stepper and add to cart button with loading state.
Promo Banner with Countdown
Dark Tailwind CSS sale banner with a live countdown timer, discount code, call-to-action button and a dismiss control.
Admin Dashboard Layout
Dark Tailwind CSS admin dashboard with off-canvas sidebar, topbar search, KPI cards, SVG revenue chart with date ranges and an orders table.
Social Login Buttons
Dark Tailwind CSS social login buttons for Google, Apple and GitHub with full-width and icon-only variants and a loading spinner state.
Segmented Control
Tailwind CSS segmented control with a sliding thumb, built on native radio inputs for single-choice view, range and billing toggles.
Command Palette Search
Dark Tailwind CSS command palette opened with Ctrl+K: live filtering with match highlights, grouped results and full keyboard navigation.
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.