G

Tailwind portfolio

Gosnippetsai

View full profile

22

Components

22 components

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.

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.

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.

Animated Terminal Demo

macOS-style terminal mockup with auto-playing typewriter lines, syntax-coloured tokens, and a blinking caret. Pure CSS animation timing.

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.

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

6

Likes

9

Views

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.

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.

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.

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.

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.

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.

Aurora Newsletter CTA

Bold newsletter section with an aurora gradient background, floating particle field and an inline email form that lifts on focus.

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.

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.

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.

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.

Liquid Glass Sign-Up Form

Glassmorphic sign-up form on a slowly morphing liquid blob background. Animated focus rings on inputs and a candy-gradient primary action.

Holographic Feature Bento

Modern asymmetric bento grid with iridescent shimmer that sweeps across each card on hover. Six tiles, four sizes, all responsive.

Cyber Glitch Hero Section

Cyberpunk-flavoured hero with animated grid, scanline pass, rotating geometry, glitched gradient headline and a glowing neon primary CTA.

React#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.

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

00

Share your own component