Loading…
All Tailwind components
27 components · sorted by most viewed · page 1 of 2
Allanimation15react12hero5interactive5glassmorphism4dashboard3form3card2holographic2html2landing2marketing2modal2pricing2stats2toggle23d14041audio1auth1bento1bento-grid1blur1cards1carousel1celebration1code1command-palette1confetti1cosmic1cta1customers1cyberpunk1dark1dashboard-card1developer1dropzone1empty-state1error1fab1features1files1floating-action1grid1infinite-scroll1keyboard1logos1marquee1menu1mockup1multi-step1music1navigation1neon1newsletter1notification1onboarding1perspective1player1profile1progress1saas1saas-ui1search1showcase1sidebar1signup1skills1slider1social-proof1sparkline1subscribe1success1switch1tailwind-component1tailwind-dashboard1terminal1testimonial1theme1tilt1toast1typewriter1upload1widget1wizard1
N
Tailwind#music#player+3
Neon Music Player Widget
Compact music player with album art, animated equaliser bars, scrubber, elapsed/remaining time and play controls. Pure CSS keyframes drive the EQ pulse and the neon ring around the album art.
Maya
1030
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
780
C
TailwindReact#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
720
G
Tailwind#tailwind-dashboard#glassmorphism+4
Glassmorphism Bento Grid SaaS Dashboard Card
A premium Tailwind CSS SaaS dashboard card component featuring a modern glassmorphism interface, subtle gradients, bento grid layout, hover micro-interactions, analytics widgets, and responsive accessibility-first design inspired by Vercel, Linear, and Framer.
R D
580
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
491
S
TailwindReact#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
461
Sponsored
A
TailwindReact#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
461
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
361
P
TailwindReact#dashboard#react+3
Featured
Pulse Stats — Animated React Dashboard
Interactive React stats panel on an aurora gradient. Click to randomise the three live counters — each animates a pulse ring driven by custom CSS keyframes, with hover glow on the card edges.
GoSnippets AI
270
G
Tailwind#glassmorphism#card+2
Glassmorphism Revenue Card
Premium glass component with layered gradients, polished spacing, responsive composition, and production-ready Tailwind styling.
GoSnippets AI
260
A
Tailwind#pricing#card+3
Featured
Aurora Glass Pricing Card
Glassmorphic pricing card sitting on an animated aurora gradient. Tailwind for layout and typography; custom CSS keyframes drive the shifting mesh + floating orbs.
GoSnippets AI
240
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
230
C
TailwindReact#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
230
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
231
R
TailwindReact#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
220
D
TailwindReact#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
220
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
211
N
Tailwind#hero#landing+2
Nebula Hero for AI Studio
Premium hero component with layered gradients, polished spacing, responsive composition, and production-ready Tailwind styling.
GoSnippets AI
170