Featured Work
Top components by engagement
Color Palettes
1 public palette
sadie-sink
#3b82f6All Components
20 published components
Scroll to Top Button with Progress Ring
A smooth animated scroll-to-top FAB button with circular SVG progress ring, live scroll percentage, ripple effect, and pulse glow. Pure HTML, CSS & JavaScript.
Responsive Testimonial Carousel with Swiper.js - HTML Tailwind CSS
A modern dark-themed testimonial carousel built with HTML, Tailwind CSS, and Swiper.js. Features a centered active slide that glows with an indigo border while inactive slides scale down and blur - creating a clean focus effect without any extra JavaScript. Each card includes a star rating, review text, user avatar with an indigo ring, name, and job title. The pagination dots animate from a small circle to a wide pill shape on the active slide. Navigation arrows have a hover state that shifts to indigo. Autoplay pauses on mouse enter and resumes on leave. Built for landing pages, SaaS marketing sites, agency portfolios, and any page that needs a professional social proof section. Single HTML file with CDN links - no build step, no npm, open it in a browser and it works. Key features: Active slide highlight with indigo glow border Inactive slides scale to 88% with blur and reduced opacity Animated pagination - dot expands to pill on active Custom prev/next buttons with indigo hover state Autoplay with pause on hover Responsive - 1 slide on mobile, 1.5 on landscape, 2 on tablet, 3 on desktop Ambient background glow blobs using fixed blur divs Plus Jakarta Sans font via Google Fonts Remix Icons for stars, arrows, and quote watermark
Animated Tab Component React Framer Motion
A smooth animated tab switcher built with React, Tailwind CSS, and Framer Motion. The active tab indicator slides between buttons using Framer Motion's layoutId - so the black pill animates fluidly from one tab to the next with a spring transition instead of an abrupt jump. Tab content fades in and out with a vertical slide and blur filter using AnimatePresence with mode="wait" - the exit animation completes before the new content enters, keeping transitions clean and never overlapping. Tabs and content are defined as plain arrays and objects at the top of the file - adding a new tab is just adding one entry to each. Written with TypeScript, fully typed content access using keyof typeof content. Works as a "use client" component in Next.js App Router or as a standard React component in Vite.
Floating Navbar with Dropdown Menu React Tailwind CSS
A floating pill-shaped navbar built with React, Tailwind CSS, and TypeScript - fixed at the top center of the viewport with a soft border and shadow. Navigation links are defined as a data array so adding or removing items is just editing one object, no JSX changes needed. The Services link has a multi-item dropdown that appears on hover using pure CSS group utilities - group-hover:opacity-100, group-hover:pointer-events-auto, group-hover:translate-y-2 - no JavaScript state required for the open/close logic. The dropdown chevron icon does a clean swap between ChevronDown and ChevronUp using layered absolute positioning and opacity transitions. The contact button is a separate PulseContactButton component with an animated pulse ring behind it using Tailwind's built-in animate-pulse on an absolutely positioned background span. Fully typed in TypeScript with prop types for the button component and clean separation between the navbar data, layout, and the reusable button.
Scroll to Top Button React Tailwind CSS Progress Indicator
A scroll-to-top button built with React, Tailwind CSS, TypeScript, and Framer Motion - with an animated circular progress ring that fills as the user scrolls down the page. The button stays hidden until the user scrolls past 100px, then fades and scales in smoothly. Scroll progress is tracked using requestAnimationFrame for performance, then smoothed through a Framer Motion spring before being mapped to the SVG stroke-dashoffset - so the ring fills fluidly instead of jumping with every scroll event. Clicking the button triggers a native smooth scroll back to the top. Hover and tap states use spring-based scale transforms, and the whole button enters and exits with AnimatePresence. Fully typed in TypeScript with cleanup handled correctly on unmount to avoid memory leaks from the scroll listener and animation frame.
Animated Bookmark Button React Framer Motion
An animated bookmark toggle button built with React, Tailwind CSS, and Framer Motion. Click it once - the icon swaps from Bookmark to BookmarkCheck with a satisfying spring animation. Click again - it snaps back. The icon entrance uses a combination of opacity, vertical slide, scale, and a subtle rotation spring so it never feels like a flat toggle. AnimatePresence with mode="wait" handles the exit animation before the new icon enters, so both never appear on screen at the same time. The button itself scales up slightly on hover and compresses on tap using whileHover and whileTap - all physics-based with spring easing. Icons are from Lucide React. Single component, zero prop drilling, state lives in one useState hook.
Accordion FAQ Tailwind CSS
A minimal, single-open accordion built entirely with Tailwind CSS and a small vanilla JavaScript toggle function - no custom CSS, no external libraries. Each item expands smoothly using max-h and opacity transitions controlled by Tailwind utility classes swapped in and out via JS. The toggle icon is a + SVG that rotates 45° into an × when the item opens, giving a clean visual indicator without swapping elements. Only one accordion item can be open at a time - opening a new one automatically closes the previous. Fully responsive across mobile, tablet, and desktop using Tailwind's responsive breakpoint prefixes. Uses the Tailwind CSS v4 browser CDN so it works in a single HTML file with zero setup.
FAQ Accordion HTML CSS JavaScript
A clean FAQ accordion built with plain HTML, CSS, and vanilla JavaScript - no libraries, no dependencies. Click any question to expand the answer, click again to collapse it. Multiple items can stay open at the same time. The toggle indicator switches between + and - using a CSS ::before pseudo-element, so no extra HTML needed. The expand/collapse animation runs on a CSS height transition with overflow: hidden - smooth and lightweight. Styled with a white card on a dark navy background using the Rubik font from Google Fonts. Six questions covering HTML, CSS, JavaScript, React, PHP, and Node.js - easy to swap out for your own content by just editing the .container divs in the HTML.
FAQ Accordion HTML CSS JavaScript
A clean FAQ accordion built with plain HTML, CSS, and vanilla JavaScript - no libraries, no dependencies. Click any question to expand the answer, click again to collapse it. Multiple items can stay open at the same time. The toggle indicator switches between + and - using a CSS ::before pseudo-element, so no extra HTML needed. The expand/collapse animation runs on a CSS height transition with overflow: hidden - smooth and lightweight. Styled with a white card on a dark navy background using the Rubik font from Google Fonts. Six questions covering HTML, CSS, JavaScript, React, PHP, and Node.js - easy to swap out for your own content by just editing the .container divs in the HTML.
Responsive Modal Popup Form Tailwind CSS Javascript
A centered modal popup with a fully validated contact form — built with HTML, Tailwind CSS, and vanilla JavaScript. No frameworks, no libraries, just clean utility-first code. The modal opens from a trigger button, animates in with a spring transition, and traps focus inside for full keyboard accessibility. The form has five fields: full name, email, password, phone (optional), and a message textarea. Every required field validates on blur first, then switches to live input validation so it doesn't yell at you before you've finished typing. Password has a show/hide toggle and a 5-level strength bar that shifts from red to green. The textarea tracks characters live with a counter that warns at 450/500. On submit it validates everything at once, focuses the first error automatically, shows a loading spinner, and transitions to a success state after the async call. Resetting brings everything cleanly back to zero. Tailwind handles all styling — layout, color, states, responsive, transitions. Custom CSS is kept to exactly 4 things that Tailwind genuinely cannot do: the modal's dual-easing open/close transition, the strength bar width + color transition, the checkbox checkmark pseudo-element, and scrollbar styling.
5 Breadcrumb UI Patterns Tailwind CSS
Five distinct breadcrumb navigation patterns built with pure HTML and Tailwind CSS — no JavaScript, no dependencies. Each pattern follows the same warm monochrome design system but takes a completely different visual approach. Pattern 01 uses a classic slash separator with muted-to-ink hover transitions. Pattern 02 wraps each crumb in a bordered pill tag, with the current page getting a solid dark fill matching the CTA button style. Pattern 03 uses a 4×4px circular dot separator with underline hover states on links and a permanent underline on the active crumb. Pattern 04 replaces the home link with a bordered icon button and uses SVG chevron arrows as separators — structured and compact. Pattern 05 is a stepped numbered breadcrumb with a horizontal line connector and three distinct states: completed (checkmark), active (dark fill), and upcoming (muted) — useful for multi-step flows and deep hierarchies. All five are horizontally scrollable on mobile with hidden scrollbars, fully accessible with aria-label and aria-current="page", and use DM Serif Display for headings and DM Sans for all breadcrumb text on a warm #f5f4f1 background.
Dynamic Product Cart Tailwind CSS and JavaScript
A fully dynamic product cart page built with pure HTML, Tailwind CSS, and vanilla JavaScript — no frameworks, no dependencies. Features an 8-product grid with live category filtering, a slide-in cart sidebar with overlay, real-time quantity controls, line totals, promo code input, and an animated cart badge. Products are organized into Design, Development, and Strategy categories — switching filters updates the grid and product count instantly. The cart sidebar handles empty state, item addition and removal, quantity increment and decrement, and a checkout flow. Typography uses DM Serif Display for prices and headings, DM Sans for all body and UI text, on a warm #f5f4f1 background with #111110 ink, #888580 muted gray, and #e8e7e4 borders — no gradients, no colored accents, nothing decorative that doesn't earn its place.
Dark Agency Footer Tailwind CSS
A dark, minimal agency footer built with pure HTML and Tailwind CSS — no JavaScript, no gradients, no gimmicks. Three-row layout with a 4-column main section (brand, services, company, contact/CTA), a newsletter bar with inline email input, and a clean bottom bar with copyright and legal links. Social icons are square-bordered and fill on hover. Typography uses DM Serif Display for the logo and DM Sans for everything else, all on a warm near-black background with subtle warm-gray borders. Fully responsive — 4 columns on desktop, 2×2 grid on tablet, single centered stack on mobile. The only custom CSS is for hover transitions that Tailwind can't handle natively.
Professional Contact Us Page HTML, CSS, Js
A clean, professional Contact Us page built with pure HTML, CSS, and Vanilla JS — no frameworks, no gradients, no fluff. Features a two-column layout with a contact form on the right and office info, map, and social links on the left. Fully responsive with a collapsible mobile nav. Includes real-time form validation, character counter, loading state on submit, and a toast notification on success. Typography uses DM Serif Display for headings and DM Sans for body text, with a warm neutral background, white cards, 1px borders, and a near-black accent — professional and minimal without being boring.
FAQ Accordion with Numbered Badges
Animated FAQ accordion with numbered badge indicators, smooth expand/collapse, indigo gradient glow, chevron rotation, and full keyboard accessibility. HTML,Tailwind CSS & JS.
Toggle button
Share a UI component with the community. It will be reviewed before publishing.
Button
Share a UI component with the community. It will be reviewed before publishing.