Loading…
All Tailwind components
23 components · sorted by recently added
D
TailwindReact#upload#dropzone+3
Drag-and-Drop File Upload
Animated drop zone with drag-over glow, queued file thumbnails, per-file progress bars that auto-fill, and a successful-state checkmark. Click "Browse" or drop files anywhere on the zone.
Maya
10
S
Tailwind
React#onboarding#wizard+3
Step Wizard Onboarding
Three-step onboarding wizard with an animated progress bar, slide-fade panel transitions and contextual hints. Forward / back nav and completion celebration.
GoSnippets AI
11
M
Tailwind
#marquee#logos+3
Marquee Logo Cloud
Infinite horizontal marquee of partner / customer logos with a soft fade-mask on both edges. Pause on hover, dual-row counter-scrolling rails.
GoSnippets AI
00
C
Tailwind
React#modal#confetti+3
Confetti Success Modal
Click the trigger — a success modal animates in with a pure-CSS confetti burst. Modal eases up, confetti pieces fall from above the viewport.
GoSnippets AI
00
A
Tailwind
#terminal#code+3
Animated Terminal Demo
macOS-style terminal mockup with auto-playing typewriter lines, syntax-coloured tokens, and a blinking caret. Pure CSS animation timing.
GoSnippets AI
11
R
Tailwind
React#fab#menu+3
Radial Floating Action Menu
Floating action button that fans out four sub-actions in a radial arc on click. Tap rotates the plus icon to a close icon; each action chip eases in.
GoSnippets AI
00
Sponsored
3
Tailwind
#cards#tilt+3
3D Tilt Showcase Cards
Three product-card teasers with a CSS-only perspective-tilt on hover. Inner contents slide forward with parallax, glow rims activate, all in 320ms.
GoSnippets AI
00
A
Tailwind
React#progress#skills+3
Animated Skill Progress Bars
Profile skill panel where each progress bar fills from 0 to its value with an eased animation. Each bar's gradient is tinted to match the skill level.
GoSnippets AI
00
S
Tailwind
#saas#hero+3
SaaS Hero with App Preview
Split SaaS hero with bold gradient headline, two CTAs, social-proof logo strip and a tilted browser mockup preview floating to the right. Built for landings.
GoSnippets AI
21
C
Tailwind
React#command-palette#search+3
Command Palette (⌘K)
Spotlight-style command palette with live keystroke filtering, keyboard hint chips and grouped results. Backdrop blurs the page below for focus.
GoSnippets AI
00
C
Tailwind
React#sidebar#navigation+3
Collapsible Sidebar Navigation
Dashboard-style sidebar that smoothly collapses from a 240px expanded state to a 64px icon rail. Active item glow, hover highlight, group separators.
GoSnippets AI
00
H
Tailwind
#dashboard#stats+3
Holographic Stat Cards
Three iridescent stat cards with a slowly rotating conic-gradient sheen, sparkline preview and a delta badge. Drop-in for any dashboard hero.
GoSnippets AI
11
C
Tailwind
#404#error+3
Cosmic 404 — Lost in Space
Bold 404 page with a giant gradient numeral, floating planets, twinkling starfield and a primary CTA back to safety. Pure CSS animation.
GoSnippets AI
21
A
Tailwind
#cta#newsletter+3
Aurora Newsletter CTA
Bold newsletter section with an aurora gradient background, floating particle field and an inline email form that lifts on focus.
GoSnippets AI
00
D
Tailwind
React#toggle#theme+3
Day / Night Theme Toggle
Animated theme switch with morphing sun → moon icon and a full-page palette transition. Click anywhere on the switch to toggle the demo card's vibe.
GoSnippets AI
00
S
Tailwind
React#testimonial#carousel+3
Smooth Testimonial Carousel
Auto-rotating testimonial slider with a soft cross-fade, gradient avatar rings and indicator dots. Pause on hover, manual nav via arrows or dots.
GoSnippets AI
00
L
Tailwind
React#notification#toast+3
Live Notifications Stack
Click the action button — notifications slide in from the top-right, stack with subtle scale, then dismiss themselves. Five tones, randomised on each click.
GoSnippets AI
00
A
Tailwind
React#pricing#toggle+3
Animated Pricing Toggle
Three-plan pricing layout with a monthly/yearly toggle. Price values cross-fade with a slide animation, popular plan glows, yearly savings banner.
GoSnippets AI
11