Sadie Sink
Creator 10 Originals@sadiesink
Featured Work
Top components by engagement
Color Palettes
1 public palette
sadie-sink
#3b82f6All Components
12 published components
Animated Responsive Navbar Tailwind CSS
A clean, professional navigation bar built with pure HTML, Tailwind CSS, and vanilla JavaScript — powered by GSAP for smooth entrance animations. Features a company logo on the left using DM Serif Display, nav links in DM Sans, a multi-level Services dropdown with nested submenus for Design and Development, a Blogs dropdown, and a solid dark CTA button that stays visible at all times across every screen size. Only one dropdown can be open at a time — opening a new one automatically closes the previous. The navbar transitions from transparent to a frosted warm background on scroll. On mobile and tablet, a hamburger menu opens a full accordion with nested sub-accordions, each following the same one-open rule. Typography, spacing, and color tokens follow a consistent warm monochrome system — #111110 ink, #f5f4f1 off-white, #888580 muted gray — no gradients, no colored accents, nothing that looks like a template.
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.
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.
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.
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.