# FWD Tools

> Free browser-based tools for freelancers, frontend developers, and web professionals. No sign-up, no data upload, no server processing.

FWD Tools is a collection of 182+ free online utilities that run entirely in the browser. Tools cover developer workflows, CSS and design generation, image processing, PDF manipulation, finance and freelance calculators, SEO meta generation, and productivity. All tools are free, privacy-first, and work without an account.

Main site: https://fwdtools.com/
Sitemap: https://fwdtools.com/sitemap.xml
Blog: https://fwdtools.com/blog/

---

## Finance & Calculators

- [EMI Calculator](https://fwdtools.com/emi-calculator/) : Calculate loan EMI instantly — home loan, car loan, personal loan, education loan. Monthly EMI, total interest, amortization schedule, donut breakdown chart. 100% private, no upload.
- [Mortgage Calculator](https://fwdtools.com/mortgage-calculator/) : Estimate US monthly mortgage payments with principal, interest, property tax, homeowners insurance, PMI, HOA dues, payoff date, and downloadable amortization schedule.
- [Monthly Investment Calculator](https://fwdtools.com/monthly-investment-calculator/) : Calculate how daily, weekly, or monthly investments grow over time. Multi-currency (USD/EUR/GBP/CAD/AUD/INR), compare two contribution amounts side by side, milestone markers, Rule of 72, and CSV export.
- [Compound Interest Calculator](https://fwdtools.com/compound-interest-calculator/) : Calculate how investments grow with compound interest. Enter initial amount, monthly contributions, interest rate, and duration to see future value, total invested, interest earned, and inflation-adjusted value.
- [Retirement Calculator](https://fwdtools.com/retirement-calculator/) : Estimate retirement savings, required nest egg, monthly contribution needed, inflation-adjusted value, and withdrawal-rate income. Supports multiple currencies.
- [FD Calculator](https://fwdtools.com/fd-calculator/) : Calculate fixed deposit maturity value and interest earned for any principal, rate, tenure, and compounding frequency. Supports quarterly, monthly, half-yearly, and yearly compounding with year-wise growth table.
- [SIP Calculator](https://fwdtools.com/sip-calculator/) : Calculate mutual fund SIP maturity value for India. Add monthly SIP, expected return, duration, annual step-up, lump sum, and inflation to estimate invested amount, gains, and future value.
- [Budget Planner](https://fwdtools.com/budget-planner/) : Plan a monthly budget from net pay using the 50/30/20 rule. Split take-home income into needs, wants, savings, debt payoff, and goal timelines.
- [Net Worth Calculator](https://fwdtools.com/net-worth-calculator/) : Calculate net worth from assets minus liabilities. Track cash, investments, property, loans, credit cards, debt ratios, and monthly CSV snapshots in multiple currencies.
- [Salary to Hourly](https://fwdtools.com/salary-to-hourly-calculator/) : Convert any salary to an hourly rate instantly. Supports 8 pay periods (hourly, daily, weekly, bi-weekly, semi-monthly, monthly, quarterly, annual). Adjust hours/day, days/week, and weeks/year. Auto-detects currency.
- [Tip Calculator](https://fwdtools.com/tip-calculator/) : Calculate how much to tip at a restaurant, split a bill between friends, and find the per-person total. Supports 10–25% presets, custom tip %, and round-up options.
- [Loan Payoff Calculator](https://fwdtools.com/loan-payoff-calculator/) : Calculate how long to pay off any loan and how much interest you'll pay. Supports personal, auto, and student loans. Add extra payments to see how much interest you save. Full amortization schedule included.
- [Inflation Calculator](https://fwdtools.com/inflation-calculator/) : Find out what £1,000 in 1990 is worth today. Uses real US CPI data (1913–2024) from BLS and UK RPI data (1948–2024) from ONS. Shows total inflation %, average annual rate, purchasing power, and a year-by-year chart.
- [Credit Card Payoff](https://fwdtools.com/credit-card-payoff-calculator/) : See exactly how long it takes to pay off your credit card debt and how much interest you'll pay. Enter balance, APR, and monthly payment or target months. Compare against minimum-only payments.
- [VAT Calculator UK](https://fwdtools.com/vat-calculator-uk/) : Add or remove UK VAT at 20% (standard), 5% (reduced), 0% (zero), or custom rate. Shows net, VAT amount, and gross instantly. Includes quick-reference table and VAT registration threshold info.
- [Australia Take-Home Pay](https://fwdtools.com/australia-take-home-calculator/) : Calculate your Australian take-home pay for 2024-25. Covers income tax (Stage 3 cuts), Medicare levy, Medicare Levy Surcharge, HECS/HELP repayment, and employer superannuation. Salary or hourly input. Weekly, fortnightly, or monthly output.
- [Date Calculator](https://fwdtools.com/date-calculator/) : Calculate the number of days between two dates, your exact age in years/months/days/hours, or add and subtract days from a date. Includes quick presets and day-of-week results.
- [Aspect Ratio Calculator](https://fwdtools.com/aspect-ratio-calculator/) : Calculate aspect ratios, scale dimensions proportionally, and look up exact pixel sizes for 14 social media platforms including YouTube, Instagram, TikTok, Twitter/X, LinkedIn, Facebook, Pinterest, and OG images.
- [GST Calculator](https://fwdtools.com/gst-calculator/) : Add or remove GST for India (5%, 12%, 18%, 28%) and Australia (10%). India mode shows CGST/SGST split for intra-state and IGST for inter-state supply. Includes quick-reference table and registration threshold info.
- [UK Take-Home Pay](https://fwdtools.com/uk-take-home-calculator/) : Calculate your UK take-home pay after income tax, National Insurance, pension, and student loan. Switch between 2026/27 (current) and 2025/26 (previous) tax years. Covers England, Wales, NI and Scotland.
- [Canada Take-Home Pay](https://fwdtools.com/canada-take-home-calculator/) : Estimate Canadian take-home pay with 2026 federal tax, provincial tax, CPP/CPP2, EI, RRSP deductions, and annual/monthly/bi-weekly pay breakdowns.
- [Paycheck Calculator](https://fwdtools.com/paycheck-calculator/) : Calculate take-home pay after federal income tax, state income tax, Social Security, Medicare, 401(k), and health insurance. Covers all 50 states with 2025 tax tables. Enter salary or hourly rate.
- [Rent vs Buy Calculator](https://fwdtools.com/rent-vs-buy-calculator/) : Compare renting vs buying a home with rent growth, mortgage costs, property tax, insurance, HOA, maintenance, appreciation, closing costs, selling costs, and investment returns.
- [Freelance Rate Calculator](https://fwdtools.com/freelance-rate-calculator/) : Calculate your freelance hourly rate from desired income, tax, expenses, and billable hours. Shows minimum rate, recommended rate, day rate, and market comparison. Runs fully in your browser.
- [Working Days Calculator](https://fwdtools.com/working-days-calculator/) : Count working days between two dates. Exclude weekends, public holidays, and custom days off. Shows calendar breakdown and day count instantly.

---

## Freelancer Business Tools

- [Freelance Invoice Generator](https://fwdtools.com/freelance-invoice-generator/) : Create professional freelance invoices instantly. Add logo, client details, unlimited line items, tax, and discount. Live preview updates as you type. Download as PDF or print. Free, no sign-up.
- [Freelance Dashboard](https://fwdtools.com/freelance-dashboard/) : All-in-one workspace for freelancers. Daily focus tasks and timestamped work log, full kanban board, world clock, and cross-tool Freelance Hub. Optional AES-GCM encrypted GitHub Gist sync. No login, 100% private.
- [Proposal Builder](https://fwdtools.com/proposal-builder/) : Build freelance proposals in your browser with reusable templates, scope, deliverables, timeline, terms, local IndexedDB storage, and PDF/CSV/JSON export.
- [Contract Template Manager](https://fwdtools.com/contract-template-manager/) : Manage freelance contract templates, reusable clauses, client details, signature notes, signed dates, and local export in your browser.
- [Scope Creep Tracker](https://fwdtools.com/scope-creep-tracker/) : Track original scope, client change requests, approvals, extra-billable work, and decision logs locally in IndexedDB.
- [Follow-Up Reminder Board](https://fwdtools.com/follow-up-reminder-board/) : Track lead, proposal, invoice, testimonial, and project follow-ups on a local browser board stored in IndexedDB.
- [Local Invoice Tracker](https://fwdtools.com/local-invoice-tracker/) : Track invoices locally in IndexedDB with line items, due dates, paid amounts, outstanding totals, CSV export, and browser print-to-PDF.
- [Freelance Expense Tracker](https://fwdtools.com/freelance-expense-tracker/) : Track software subscriptions, contractors, hardware, travel, tax-deductible freelance expenses, and CSV exports locally in IndexedDB.
- [Retainer Tracker](https://fwdtools.com/retainer-tracker/) : Track monthly retainers, included hours, deliverables, used hours, renewal dates, rollover notes, and recurring revenue locally in IndexedDB.
- [Freelance Availability Planner](https://fwdtools.com/freelance-availability-planner/) : Track booked projects, weekly capacity, start and end dates, open slots, and overload warnings locally in IndexedDB.
- [Milestone Payment Tracker](https://fwdtools.com/milestone-payment-tracker/) : Track deposits, milestone payments, due dates, paid dates, paid amounts, and outstanding project balances locally in IndexedDB.
- [Resume Builder](https://fwdtools.com/resume-builder/) : Build a professional resume entirely in your browser. 4 templates (2 ATS-friendly), 6 Google Fonts, custom accent color, 7 reorderable sections, live preview, one-click PDF download. No login, no AI, your data never leaves your device.
- [Client CRM](https://fwdtools.com/client-crm/) : Use a private client CRM for freelancers with no login. Save client profiles, notes, project history, rates, and follow-up dates locally in IndexedDB.
- [Client Intake Form Builder](https://fwdtools.com/client-intake-form-builder/) : Build client intake forms for freelancers, preview fields, save responses locally in IndexedDB, and export intake answers as CSV or JSON.
- [Client Portal Lite](https://fwdtools.com/client-portal-lite/) : Create a private local client checklist for project links, files needed, milestones, status, and handoff notes stored in browser IndexedDB.

---

## Developer & Code Tools

- [Binary / Hex / ASCII Converter](https://fwdtools.com/binary-hex-ascii/) : Convert between binary, hexadecimal, decimal, octal, and ASCII text instantly. Enter any format and all others update in real time. Free online tool.
- [Number Base Converter](https://fwdtools.com/number-base-converter/) : Convert numbers between binary, octal, decimal, and hexadecimal instantly. Shows 8-bit and 16-bit binary representations. Includes a reference table of common values from 0 to 65535.
- [HTML Entity Encoder](https://fwdtools.com/html-entity-encoder/) : Encode HTML special characters to named entities (&, <, >) or numeric entities. Decode HTML entities back to plain text. Three modes: minimal, full, and numeric.
- [UUID / ULID / NanoID](https://fwdtools.com/uuid-generator/) : Generate UUID v4, v7, v1, ULID, and NanoID in bulk. Uppercase, no-hyphens, custom NanoID alphabet. Up to 1000 IDs, copy all or download. 100% browser, no sign-up.
- [Password Generator](https://fwdtools.com/password-generator/) : Generate cryptographically secure passwords, passphrases, PINs, and memorable passwords. Live entropy meter, crack-time estimate, bulk generation, and copy history.
- [QR Code Generator](https://fwdtools.com/qr-code-generator/) : Generate QR codes for URLs, WiFi, email, SMS, vCard, and phone. Custom dot styles, colors, gradients, logo upload. Download PNG or SVG.
- [JSON Formatter](https://fwdtools.com/json-formatter/) : Format, validate, minify, and syntax-highlight JSON. Live parsing with sort keys and download support.
- [HTML Formatter](https://fwdtools.com/html-formatter/) : Paste HTML and format it instantly with proper indentation. Prettifies inline <style> CSS and <script> JS. Line numbers + history.
- [JavaScript Minifier](https://fwdtools.com/javascript-minifier/) : Minify JavaScript online in your browser. Concatenate multiple JS files, remove comments, compress whitespace, optionally uglify variable names, wrap in an IIFE, and download a .min.js file.
- [Tailwind Formatter](https://fwdtools.com/tailwind-formatter/) : Sort, deduplicate, and group Tailwind CSS classes by category. Flat and grouped output views.
- [JSON Table Viewer](https://fwdtools.com/json-table-viewer/) : Visualize JSON arrays as tables. Filter, sort, paginate, toggle columns, and export as CSV.
- [Diff Checker](https://fwdtools.com/diff-checker/) : Compare two texts side-by-side with LCS-based diffing. Split, unified, and char-level inline modes.
- [Responsive Preview](https://fwdtools.com/responsive-preview-tool/) : Preview any website at 8 screen sizes from 320px mobile to 1920px wide. Zoom controls and device tabs.
- [SQL Playground](https://fwdtools.com/sql-playground/) : Learn SQL through 35 structured lessons with real PostgreSQL in your browser. Challenges, query explainer, multi-tab editor, data editor, table previews, query history, and smart error hints.
- [MongoDB Playground](https://fwdtools.com/mongo-playground/) : Learn MongoDB interactively with a live query editor and instant results. 32 lessons across 10 chapters — CRUD, query operators, array queries, update operators, aggregation pipeline, and more. No install, no server.
- [Express.js Playground](https://fwdtools.com/express-playground/) : Learn Express.js interactively with a live API editor and HTTP client. 32 lessons — routing, middleware, REST APIs, error handling, authentication, and mini-projects. No Node.js install.
- [GraphQL Playground](https://fwdtools.com/graphql-playground/) : Learn GraphQL in your browser with a full in-browser executor. 12 lessons covering queries, mutations, variables, fragments, directives, introspection, and unions. No server or account needed.
- [Firebase Playground](https://fwdtools.com/firebase-playground/) : Learn Firebase Firestore in your browser with a full in-browser simulator. Add, read, update, delete, query documents, use subcollections, real-time listeners, and special values. No Firebase account needed.
- [REST API Builder Playground](https://fwdtools.com/rest-api-builder-playground/) : Create mock REST API routes visually, test GET/POST/PUT/DELETE requests with a built-in HTTP client, and export working Express.js code. CRUD templates, auth simulation, status codes, headers. No backend required.
- [Redis Playground](https://fwdtools.com/redis-playground/) : Learn Redis with 8 guided lessons — key-value, TTL expiration, caching patterns, data types (List, Set, Hash, Sorted Set), atomic counters (INCR/INCRBY), distributed locks (SETNX), key inspection (KEYS, TYPE, MGET), and Pub/Sub. Visual key-space table, TTL countdown, command history, guided challenges. No server required.
- [SQL Formatter](https://fwdtools.com/sql-formatter/) : Format and beautify SQL queries with proper indentation, keyword casing, and syntax highlighting. Minify SQL, dialect support for MySQL, PostgreSQL, SQLite & SQL Server.
- [API Mock Generator](https://fwdtools.com/api-mock-generator/) : Build fake REST API endpoints with realistic mock JSON. Auto-generate fake data, export as JSON Server db.json or Postman collection. Free for frontend devs.
- [SVG to PNG Converter](https://fwdtools.com/svg-to-png/) : Convert SVG to PNG instantly. Upload file or paste SVG code. Set scale (1×–4×), custom dimensions, transparent or custom background. Download PNG free.
- [HTML to Markdown](https://fwdtools.com/html-to-markdown/) : Convert HTML to clean Markdown instantly. Paste from web pages, CMS exports, or email templates. Full support for tables, code blocks, links, images, and lists. Copy or download .md.
- [Markdown to HTML](https://fwdtools.com/markdown-to-html/) : Convert Markdown to HTML instantly with live preview. Supports GFM tables, task lists, fenced code blocks. Copy HTML fragment or full page, download as .html file.
- [JSON → TypeScript](https://fwdtools.com/json-to-typescript/) : Paste JSON and get TypeScript interfaces or type aliases instantly. Handles nested objects, arrays of objects, optional fields, null safety, export keyword, and custom root names.
- [CSS → Tailwind](https://fwdtools.com/css-to-tailwind/) : Paste CSS and get the equivalent Tailwind utility classes instantly. Handles spacing, colors, typography, flexbox, grid, borders, and more — with arbitrary value fallbacks.
- [Tailwind → CSS](https://fwdtools.com/tailwind-to-css/) : Paste Tailwind utility classes and get the equivalent CSS declarations. Supports all spacing, color, typography, flex, grid utilities — plus arbitrary values and responsive/state variants.
- [HTML → JSX Converter](https://fwdtools.com/html-to-jsx-converter/) : Convert HTML to React JSX. Handles className, htmlFor, camelCase events, self-closing tags, and inline styles.
- [REM ↔ PX Converter](https://fwdtools.com/rem-px-converter/) : Bidirectional REM and PX conversion with custom base font size. Live preview and reference table.
- [API Request Generator & Tester](https://fwdtools.com/api-request-generator-tester/) : Generate HTTP request code in 12 languages and test APIs live in the browser — Fetch, Axios, XHR, Node.js, cURL, Python, PHP, Ruby, Go, C#, Jest, Pytest. GraphQL, env vars, history & Postman import.
- [URL Encoder/Decoder](https://fwdtools.com/url-encoder-decoder/) : Encode and decode URLs and query strings. Supports encodeURIComponent (query params) and encodeURI (full URLs). Highlights %XX sequences live.
- [Hash Generator](https://fwdtools.com/hash-generator/) : Generate MD5, SHA-1, SHA-256, SHA-384, and SHA-512 hashes from text or files. HMAC mode, hash verification, uppercase toggle, copy-all. 100% client-side.
- [Image Editor](https://fwdtools.com/image-editor/) : Edit images in your browser — resize to exact pixels or presets, crop with aspect lock, rotate and flip, compress with quality control, add text overlays, fill background color, and convert format. Nothing uploaded.
- [Relight Photo](https://fwdtools.com/relight-photo/) : Relight photos in your browser with draggable light sources, studio/neon/sunset/product presets, ambient dimming, vignette shadows, before/after preview, and PNG/JPEG/WebP export. Nothing uploaded.
- [Image Background Remover](https://fwdtools.com/image-background-remover/) : Remove simple image backgrounds locally with edge-connected background detection, tolerance and feather controls, preview backgrounds, and transparent PNG/WebP export. Nothing uploaded.
- [Image Compressor](https://fwdtools.com/image-compressor/) : Compress images in the browser with a live split-slider before/after comparison. WebP conversion, quality control, resize options, batch processing. Nothing uploaded.
- [Image to SVG](https://fwdtools.com/image-to-svg/) : Convert raster images to scalable SVG vector graphics in your browser. Color, grayscale, and B&W tracing modes with smoothing and detail controls. Download or copy SVG instantly.
- [Image to Base64](https://fwdtools.com/image-to-base64/) : Convert PNG, JPEG, WebP, GIF, SVG, or BMP to Base64. Get Data URI, HTML img, CSS background-image, raw Base64, or SVG URL-encoded output. Format conversion with quality control.
- [Image to Text](https://fwdtools.com/image-to-text-converter/) : Extract text from any image using Tesseract OCR. Upload a JPEG, PNG, WebP, or screenshot and get editable text in seconds. 16 languages supported. 100% private — runs entirely in your browser.
- [jQuery Playground](https://fwdtools.com/jquery-playground/) : Learn jQuery with 72 interactive lessons across 16 chapters — including Utilities, Deferred & Promises, and Plugin Basics. Live preview, syntax highlighting, progress tracking, console, and quick-check challenges.
- [Bootstrap 5 Playground](https://fwdtools.com/bootstrap5-playground/) : Learn Bootstrap 5 with 50 interactive lessons across 15 chapters — grid, forms with floating labels, modals, toasts, offcanvas, carousel, position utilities, and more. Native dark mode, auto-init JS components, live preview.
- [Regex Tester](https://fwdtools.com/regex-tester/) : Live regex match highlighting, capture group table, replace mode with $1/$<name> references, 10 presets, and a quick-reference panel. All JS flags supported.
- [Base64 Encoder/Decoder](https://fwdtools.com/base64-encoder-decoder/) : Encode text or files to Base64 and decode Base64 strings back to text or images. Standard, URL-safe, and MIME variants. 100% client-side.
- [JWT Decoder](https://fwdtools.com/jwt-decoder/) : Decode JWT header and payload, read all claims with descriptions, verify HS256 signatures, and check expiry with a live countdown. 100% client-side.
- [Timestamp Converter](https://fwdtools.com/timestamp-converter/) : Convert Unix timestamps to ISO 8601, UTC, RFC 2822, relative time and more. Supports seconds, milliseconds, microseconds. Timezone picker, batch converter, live clock.
- [Cron Expression Builder](https://fwdtools.com/cron-expression-builder/) : Build and validate cron expressions visually. Point-and-click field builder, instant human-readable descriptions, next 6 run times, 16 presets, and full POSIX syntax support.
- [YAML ↔ JSON Converter](https://fwdtools.com/yaml-json-converter/) : Convert YAML to JSON or JSON to YAML instantly. Auto-detects input format, syntax-highlighted output, sort keys, copy & download. Full YAML 1.2 support.
- [CSV → JSON Converter](https://fwdtools.com/csv-json-converter/) : Convert CSV to JSON or JSON to CSV instantly. Auto-detects format, infers types, live table preview, multiple delimiters, copy & download. RFC 4180 compliant.
- [Favicon Generator](https://fwdtools.com/favicon-generator/) : Generate all favicon sizes from any image. Creates 8 PNGs (16–512px), multi-size favicon.ico, Apple Touch Icon, Android Chrome icons, and site.webmanifest. Download as ZIP. 100% client-side.
- [JSON Dashboard Generator](https://fwdtools.com/json-dashboard-generator/) : Paste any JSON or API response — instant stat cards, bar/line/pie charts, category filters, sortable table, and a complete React dashboard with Recharts. No setup required.
- [Vue.js Playground](https://fwdtools.com/vue-playground/) : Learn Vue 3 interactively with 40 guided lessons across 13 chapters — Options API, Composition API, all six core directives, composables, slots, provide/inject, Teleport, custom directives, v-memo, async components, and 4 real mini-projects. Live preview, progress tracking, share via URL. No install.
- [HTML Playground](https://fwdtools.com/html-playground/) : Learn HTML interactively with 42 click-based lessons across 13 chapters — tags, forms, tables, semantic HTML, responsive images, native components (dialog, SVG, ARIA), performance hints, and SEO metadata. Live split-pane preview, no typing required, no install.
- [JavaScript Playground](https://fwdtools.com/js-playground/) : Learn JavaScript interactively with 60 guided lessons across 25 chapters — from variables and functions through DOM, events, async/await, fetch, closures, classes, generators, Web Workers, Canvas, performance, security, and testing. Live editor, clickable DOM preview, console panel, progress tracking. No install.
- [Git Playground](https://fwdtools.com/git-playground/) : Learn Git interactively with 43 guided lessons and a browser-safe terminal simulator — init, status, add, commit, log, branches, merge conflicts, remotes, GitHub workflow, undo, reset, revert, rebase, cherry-pick, hooks, submodules, LFS, signed commits, and CI/CD. No install.
- [TypeScript Playground](https://fwdtools.com/typescript-playground/) : Learn TypeScript interactively with 32 guided lessons across 10 chapters — basic types, inference, arrays, tuples, object types, aliases, interfaces, unions, functions, classes, generics, utility types, keyof, type guards, conditional types, mapped types, async patterns, tsconfig, migration, and best practices. No install, no setup.
- [Tailwind Playground](https://fwdtools.com/tailwind-playground/) : Learn Tailwind CSS interactively with a live HTML editor and instant preview. 48 lessons across 15 chapters — utility classes, group/peer modifiers, arbitrary variants, has-* modifier, @layer, print styles, motion-safe, skeleton loading, dialog/popover patterns, Tailwind v4 changes, and accessibility. No install, no setup.
- [CSS Playground](https://fwdtools.com/css-playground/) : Learn CSS interactively with a live editor and instant preview. 53 lessons across 18 chapters — selectors, box model, flexbox, grid, animations, variables, responsive design, container queries, subgrid, CSS nesting, @layer, logical properties, scroll-driven animations, blend modes, @property, and modern units. No install, no setup.
- [SCSS Playground](https://fwdtools.com/scss-playground/) : Learn SCSS and Sass online with 45 guided lessons, a live HTML preview, and compiled CSS output — variables, nesting, @use, @forward, mixins, functions, maps, loops, design tokens, CSS variables, responsive mixins, cascade layers, container queries, architecture, and modern Sass patterns. No install.
- [React Playground](https://fwdtools.com/react-playground/) : Learn React interactively with a live code editor and instant preview. 44 lessons across 19 chapters — JSX, hooks, state, forms, error boundaries, portals, keys, compound components, render props, Suspense, useTransition, testing, GSAP in React, and more. JSX syntax highlighting, console panel, Quick Check challenges. No install, no setup.
- [Angular Playground](https://fwdtools.com/angular-playground/) : Learn Angular interactively with 45 guided lessons across 13 chapters — templates, directives, components, services, routing, standalone components, signals, reactive forms, RxJS, lazy loading, change detection, testing, and feature architecture. Live preview, no Angular CLI, no install.
- [Next.js Playground](https://fwdtools.com/nextjs-playground/) : Prototype Next.js App Router screens in your browser. Edit page.jsx, layout.jsx, globals.css, and a route handler with live preview, API testing, autosave, and ZIP export.
- [Node.js Playground](https://fwdtools.com/nodejs-playground/) : Learn Node.js visually with a client-side event loop simulator for async/await, Promises, fs examples, and API examples. Simulated output, no backend execution.
- [PHP Playground](https://fwdtools.com/php-playground/) : Learn PHP online with 60 guided lessons and a browser-safe simulator — syntax, variables, forms, validation, arrays, OOP, JSON APIs, PDO/MySQL, Composer, PHPUnit, Laravel basics, deployment, and security. No install.
- [Python Playground](https://fwdtools.com/python-playground/) : Learn Python with 18 guided lessons across 8 chapters — variables, strings, numbers, booleans, while loops, list comprehensions, tuples, sets, dictionaries, functions, lambda, scope, classes, try/except, and JSON. Step-by-step visual tracer shows memory diffs, call stack, and output on every line.
- [GSAP Playground](https://fwdtools.com/gsap-playground/) : Learn GSAP animation interactively with a live JavaScript editor and instant visual preview. 55 lessons across 18 chapters — gsap.to(), timelines, stagger, ScrollTrigger, keyframes, gsap.utils, matchMedia, reduced motion, official GSAP plugins, and real animation patterns. Replay button, progress saved locally. No install, no setup.
- [HTML Table Generator](https://fwdtools.com/html-table-generator/) : Build HTML tables visually. Add rows and columns, edit cells, set alignment, and export clean semantic HTML or Tailwind CSS. Free online tool.
- [JSON Schema Generator](https://fwdtools.com/json-schema-generator/) : Paste JSON and instantly generate a JSON Schema (Draft 7). Infers types, required fields, nested objects, and arrays. Copy or download free.
- [Markdown Table Generator](https://fwdtools.com/markdown-table-generator/) : Generate Markdown tables visually. Add rows and columns, edit cells, set column alignment, and export as Markdown, HTML, or CSV. Free online tool.
- [XML Formatter / Validator](https://fwdtools.com/xml-formatter/) : Free online XML formatter, validator, and minifier. Paste XML and instantly pretty-print with syntax highlighting, validate with error line numbers, or minify to compact form.

---

## CSS Tools

- [Color Contrast Checker](https://fwdtools.com/color-contrast-checker/) : Check foreground/background color contrast ratio against WCAG 2.1 AA and AAA. Live preview for text, large text, and UI components. Suggested fix when you fail.
- [Media Queries Generator](https://fwdtools.com/css-media-queries-generator/) : Generate CSS media queries with Bootstrap, Tailwind, or MUI breakpoints. Add dark mode, reduced motion, print, and retina feature queries. Export as CSS, SCSS mixins, Tailwind config, or JS strings.
- [CSS Shape Generator](https://fwdtools.com/css-shape-generator/) : Generate pure CSS for 37 shapes — triangles, arrows, stars, hearts, hexagons, speech bubbles and more. Customize color, size, rotation. Export as CSS, HTML, React, Tailwind, SCSS, Styled-Components, or Vue.
- [CSS Easing Generator](https://fwdtools.com/css-easing-generator/) : Visual CSS cubic-bezier easing generator. Drag handles to create custom timing functions, preview live animations, copy transition/animation snippets. 27 presets including Back, Expo, Circ easings.
- [CSS Animation Generator](https://fwdtools.com/css-animation-generator/) : 79 CSS keyframe animations with live preview. Visual cubic-bezier editor. Export CSS, Tailwind config, or React.
- [CSS Loader Generator](https://fwdtools.com/css-loader-generator/) : 10 pure CSS loading animations. Customize colors, size, and speed. Copy CSS and HTML instantly.
- [CSS Transform Generator](https://fwdtools.com/css-transform-generator/) : Visual sliders for translate, rotate, scale and skew with live preview. Transform-origin picker, 3D perspective, 10 presets. Export CSS, Tailwind, or React.
- [CSS Filter Generator](https://fwdtools.com/css-filter-generator/) : 9 CSS filter functions with live side-by-side preview. Blur, brightness, contrast, saturate, grayscale, sepia, hue-rotate, invert, opacity + drop-shadow. 10 presets.
- [Box Shadow Generator](https://fwdtools.com/box-shadow-generator/) : Multi-layer CSS box shadow studio with neumorphism presets. Export CSS, Tailwind, JS, or SCSS.
- [Gradient Generator](https://fwdtools.com/gradient-generator/) : Build CSS linear, radial, and conic gradients visually. Color stop editor, presets, and CSS/Tailwind export.
- [Flexbox Builder](https://fwdtools.com/flexbox-builder/) : Visual CSS Flexbox layout editor. Control every flex property and export CSS, SCSS, Tailwind, or React.
- [CSS Grid Builder](https://fwdtools.com/css-grid-builder/) : Build CSS grid layouts visually — drag to create named areas, edit column/row tracks, adjust gaps. Export CSS, SCSS, Tailwind, React, or full HTML.
- [Color Palette Generator](https://fwdtools.com/color-palette-generator/) : Generate harmonious color palettes from any base color. Monochromatic, analogous, complementary, triadic, shades & more. Export CSS vars, Tailwind, Hex, HSL, SCSS.
- [CSS Clamp() Generator](https://fwdtools.com/css-clamp-generator/) : Generate a full fluid type scale (xs–4xl) using CSS clamp(). Visual viewport slider, 6 scale ratios, formula explainer. Export CSS vars, Tailwind, or SCSS.
- [Glassmorphism Generator](https://fwdtools.com/glassmorphism-generator/) : Build CSS glassmorphism effects visually — blur, transparency, saturation, border, shadow. 8 presets, image upload, Tailwind & React export.
- [Mesh Gradient Generator](https://fwdtools.com/mesh-gradient-generator/) : Create smooth, organic mesh gradients with draggable color blobs. Export as SVG, PNG, or CSS radial-gradient code.
- [CSS Minifier / Beautifier](https://fwdtools.com/css-minifier-beautifier/) : Minify CSS to reduce file size or beautify it for readability. Shows compression stats, syntax highlighting, file upload, and history.
- [CSS Autoprefixer](https://fwdtools.com/css-autoprefixer/) : Add vendor prefixes to CSS with PostCSS Autoprefixer in your browser. Choose Browserslist presets or custom targets, reject browsers, configure grid/flexbox prefixes, remove old prefixes, and copy or download output.
- [Color Picker](https://fwdtools.com/color-picker/) : Pick any color and convert instantly between HEX, RGB, HSL, HSV, OKLCH, and CMYK. Smart paste, WCAG contrast ratios, copy any format.
- [CSS Clip-path Generator](https://fwdtools.com/css-clip-path-generator/) : Visual CSS clip-path editor with draggable handles. 18 presets — triangle, star, hexagon, arrow, chevron. Polygon, circle, ellipse & inset modes. CSS, Tailwind & React export.
- [SVG Wave Generator](https://fwdtools.com/svg-wave-generator/) : Generate smooth SVG wave dividers with sliders for amplitude, wave count, layers, and height. Top or bottom edge, solid or gradient fill. Export SVG, CSS background, or React.
- [Carousel Builder](https://fwdtools.com/carousel-builder/) : Build a responsive carousel visually and export clean HTML, CSS, JavaScript, or a React component. Slide & fade transitions, arrows, dots, autoplay, accent color, and more.
- [CSS Button Generator](https://fwdtools.com/css-button-generator/) : Create beautiful CSS buttons with live preview. 16 presets including gradient, glassmorphism, neumorphism, neon glow, 3D, outlined. Export CSS, SCSS, React JSX, Tailwind.
- [Toggle Switch Generator](https://fwdtools.com/toggle-switch-generator/) : Design accessible CSS toggle switches with live state previews. Customise size, colors, shape, and transitions. Export HTML+CSS, React, Vue 3, or Tailwind with ARIA built in.

---

## Design & Image Tools

- [Font Pairing Tool](https://fwdtools.com/font-pairing-tool/) : Discover curated Google Font combinations with live preview. Adjust heading and body sizes with CSS export.
- [SVG Animation Generator](https://fwdtools.com/svg-animation-generator/) : Animate SVG shapes with CSS, SMIL, or GSAP. 50+ presets — rotate, bounce, draw stroke, marching ants, orbit. Download as SVG or HTML.
- [SVG Motion Studio](https://fwdtools.com/svg-motion-studio/) : Animate SVG layers with timeline keyframes, bezier easing, drag-and-drop reorder, copy/paste keyframes, custom presets, and export to CSS, GSAP, ScrollTrigger, Framer Motion, or Lottie JSON. Multi-project library and GitHub Gist sync keep projects across devices.
- [Animated SVG Icons](https://fwdtools.com/animated-svg-icons/) : 105+ animated SVG icons — checkmarks, arrows, loaders, hearts, bells, and more. Customize color, stroke, speed. Export SVG, JSX, or HTML.
- [Code Screenshot](https://fwdtools.com/code-screenshot-generator/) : Turn any code snippet into a stunning PNG. 9 themes, 22 languages, macOS/Windows/Terminal frames, gradient backgrounds. Download at 1×/2×/3× scale.
- [Image Color Palette Extractor](https://fwdtools.com/image-color-palette/) : Upload an image and extract the dominant color palette as HEX, RGB, and HSL values. Copy any color instantly. Browser-only, no upload to server.

---

## SEO & Meta Tools

- [Meta Tag Generator](https://fwdtools.com/meta-tag-generator/) : Generate complete meta tag sets from page details. Live Google SERP, Facebook OG, and Twitter card previews. Export as HTML, Next.js metadata, React Helmet, Vue/Nuxt, Astro, or JSON-LD.
- [Robots.txt Generator](https://fwdtools.com/robots-txt-generator/) : Generate a clean robots.txt file with Allow, Disallow, Crawl-delay, Host, and Sitemap directives. Includes public site, staging, and ecommerce presets with copy and download output.
- [Sitemap.xml Generator](https://fwdtools.com/sitemap-generator/) : Create a valid sitemap.xml file from URLs or paths. Add lastmod, changefreq, and priority fields, then copy or download the XML for search engines.
- [.htaccess Redirect Generator](https://fwdtools.com/htaccess-redirect-generator/) : Generate Apache .htaccess redirect rules for custom 301 and 302 redirects, HTTPS enforcement, www/non-www canonical hosts, and trailing slash handling.
- [Schema Markup Generator](https://fwdtools.com/schema-markup-generator/) : Generate JSON-LD schema markup for WebSite, Article, Product, FAQPage, and LocalBusiness pages with ready-to-paste script output.
- [Hreflang Tag Generator](https://fwdtools.com/hreflang-tag-generator/) : Generate hreflang alternate tags for multilingual and regional pages. Output HTML link tags or sitemap XML alternates with x-default support.
- [Security Headers Generator](https://fwdtools.com/security-headers-generator/) : Generate security header configuration for Apache, Nginx, and Next.js, including CSP, HSTS, X-Frame-Options, Referrer-Policy, and Permissions-Policy.
- [LLMs.txt Generator](https://fwdtools.com/llms-txt-generator/) : Create an llms.txt draft for AI crawlers and assistants with site description, important canonical pages, sitemap link, and usage notes.

---

## PDF Tools

- [PDF to Word](https://fwdtools.com/pdf-to-word/) : Convert text-based PDF files to editable Word DOCX documents in your browser. Select pages, keep page breaks, preview extracted text, and download with no upload or sign-up.
- [PDF OCR](https://fwdtools.com/pdf-ocr/) : Run OCR on scanned PDF pages in your browser. Extract editable text page by page, copy it, or download TXT with no upload, no account, and no server queue.
- [PDF Watermark](https://fwdtools.com/pdf-watermark/) : Add text or image watermarks to PDF pages in your browser. Set opacity, rotation, position, tiling, color, and image scale, then download a new watermarked PDF with no upload or sign-up.
- [PDF Password Protector](https://fwdtools.com/pdf-password-protector/) : Password protect PDF files in your browser with qpdf-wasm. Choose 128-bit or 256-bit encryption, allow or block printing, copying, and editing, then download with no upload.
- [PDF Page Organizer](https://fwdtools.com/pdf-page-organizer/) : Visually organize PDF pages in your browser. Reorder pages, delete unwanted pages, rotate individual pages left or right, and download a clean edited PDF. No upload, no watermark, no sign-up.
- [PDF Compressor](https://fwdtools.com/pdf-compressor/) : Compress scanned or image-heavy PDFs in your browser by re-rendering pages at lower scale and JPEG quality. Choose Screen, Balanced, or Sharper presets, compare output size, and download with no upload or watermark.
- [Images to PDF](https://fwdtools.com/images-to-pdf/) : Turn JPG, PNG, WebP, GIF, BMP, or SVG images into a single PDF in your browser. Reorder pages, choose Auto, A4, Letter, or Square layouts, set margins and fit mode, then download instantly with no upload or watermark.
- [PDF to Images](https://fwdtools.com/pdf-to-images/) : Convert PDF pages to PNG, JPEG, or WebP in your browser. Select page ranges, choose output scale and quality, then download one page or a ZIP of images. 100% private, no upload, no watermark.
- [HTML / Markdown to PDF](https://fwdtools.com/html-to-pdf/) : Convert Markdown or HTML to a styled, downloadable PDF directly in your browser. Live split-pane preview, font and paper size controls. No upload, no sign-up, no watermark.
- [PDF Metadata Editor](https://fwdtools.com/pdf-metadata/) : Edit PDF metadata — title, author, subject, keywords, and creator — directly in your browser. Existing values pre-filled on upload. No upload to server, no sign-up, no watermark.
- [PDF Unlock](https://fwdtools.com/pdf-unlock/) : Remove password protection and owner restrictions from any PDF you have the key for — 100% browser-based, no upload. No sign-up, no watermark.
- [PDF Splitter](https://fwdtools.com/pdf-splitter/) : Extract specific pages from a PDF or split every page into individual files. Click a visual page grid or type a range like 1-3, 5. Download as one PDF or a ZIP archive. 100% browser-based, no upload, no watermark.
- [PDF Merger](https://fwdtools.com/pdf-merger/) : Merge multiple PDF files into one in your browser. Drag to reorder, see page counts, download instantly. 100% private — files never leave your device. No sign-up, no watermark.

---

## Text & Content Tools

- [Line Utilities](https://fwdtools.com/line-utilities/) : Sort lines A-Z or Z-A, remove duplicates, remove blank lines, number lines, reverse, shuffle, trim whitespace, uppercase/lowercase, and comma-separate. Chainable operations.
- [Word Counter](https://fwdtools.com/word-counter/) : Count words, characters, sentences, and paragraphs live. Reading time, speaking time, Flesch readability score, keyword density, and 7-mode text case converter.
- [Lorem Ipsum Generator](https://fwdtools.com/lorem-ipsum-generator/) : Generate lorem ipsum placeholder text as paragraphs, sentences, or words. Control length, wrap in HTML <p> tags, and copy instantly. Classic opening phrase option.
- [Text Case Converter](https://fwdtools.com/text-case-converter/) : Convert text to 14 case formats simultaneously — camelCase, PascalCase, snake_case, kebab-case, SCREAMING_SNAKE, Title Case, and more. Paste once, copy any format.
- [AI Prompt Studio](https://fwdtools.com/ai-prompt-studio/) : Score your AI prompts across 8 quality dimensions, detect anti-patterns, optimize for ChatGPT, Claude & Gemini, use 23 expert templates, and save a personal prompt library. No API key needed.
- [Markdown Editor](https://fwdtools.com/markdown-editor/) : Write Markdown with a real-time GitHub Flavored Markdown preview. Toolbar shortcuts, localStorage auto-save, export as .md or standalone .html. 100% browser, no sign-up.
- [Reading Time Calculator](https://fwdtools.com/reading-time-calculator/) : Paste any text to calculate estimated reading time, word count, Flesch readability score, grade level, and sentence stats. Free online tool.

---

## Productivity Tools

- [Unit Converter](https://fwdtools.com/unit-converter/) : Convert between any units for length, weight, temperature, volume, and data storage. Includes cm to inches, kg to lbs, Celsius to Fahrenheit, liters to gallons, GB to GiB, and more. Full conversion table shows all units at once.
- [YouTube Thumbnail Downloader](https://fwdtools.com/youtube-thumbnail-downloader/) : Download YouTube thumbnails in all resolutions — 1280×720 Max Res, 480×360 HQ, 640×480 SD, 320×180 MQ, 120×90 Default. Paste any YouTube URL, Shorts link, or video ID. Free, no login.
- [Pomodoro Timer](https://fwdtools.com/pomodoro-timer/) : Free Pomodoro timer with circular progress ring, sound alerts, browser notifications, custom durations, task input, and daily session stats. No sign-up.
- [Bookmark Keeper](https://fwdtools.com/bookmark-keeper/) : Private bookmark manager for developers and freelancers. Save links, tags, and notes in your browser. Optionally back up to your own encrypted GitHub Gist. Bookmarklet included — save any page in one click.
- [Browser Notepad](https://fwdtools.com/notepad/) : Private browser notepad with unlimited tabs, rich text formatting, IndexedDB autosave, local tab memory, JSON import/export, PDF/TXT/HTML/Markdown export, and optional GitHub Gist sync.
- [Daily Diary](https://fwdtools.com/daily-diary/) : Write daily notes privately in your browser. Mood tracking, tags, search, calendar view, and optional GitHub Gist backup. No login, no server — your diary stays on your device.
- [Daily Focus Log](https://fwdtools.com/daily-focus-log/) : Daily focus tasks, timestamped work log with file/image attachments, streak counter, weekly chart, and optional encrypted GitHub Gist sync. No login, fully private — your data stays in your browser.
- [Time Tracker](https://fwdtools.com/time-tracker/) : Track freelance client time with a start/stop timer, manual entries, billable revenue totals, client filtering, CSV export, JSON backup, and optional private GitHub Gist sync.
- [Mini Kanban](https://fwdtools.com/mini-kanban/) : Lightweight kanban board for developers and freelancers. Projects, custom columns, rich-text task descriptions with undo history, drag-and-drop, optional encrypted GitHub Gist sync. No login, fully private.

---

## Other Tools

- [OG Image Generator](https://fwdtools.com/og-image-generator/) : Generate 1200×630 Open Graph images for Twitter, Facebook, LinkedIn & Slack. 5 templates, custom colors, font, and logo upload. Download PNG free, no sign-up.
- [SEO Checker](https://fwdtools.com/seo-checker/) : Free SEO audit tool — check any URL or paste HTML to audit metadata, crawlability, content, links, and images with a 0–100 score. Preview Google SERP snippets, Facebook/Twitter/LinkedIn/Slack social cards, and JSON-LD schema. Export Next.js, React Helmet, Astro, or HTML tags. Download a Markdown or JSON audit report.
- [Mind Map Studio](https://fwdtools.com/mind-map/) : Multi-map mind mapping studio with IndexedDB autosave, same-device tab sync, outline navigation, auto layout, collapsible branches, node metadata, presentation mode, GitHub Gist sync, and PNG/Markdown/JSON export.
- [Database Schema Designer](https://fwdtools.com/database-schema-designer/) : Design database tables, fields, indexes, keys, and relationships visually. Start from SaaS, ecommerce, or CRM templates and export PostgreSQL, MySQL, SQLite, Prisma, Mongoose, and Firestore code.
- [UI Snippets Library](https://fwdtools.com/ui-snippets/) : Browse and copy 175+ ready-to-use UI snippets — 12 categories, all with 9+ snippets. Heroes, pricing, Gantt charts, Pomodoro timers, video heroes, editable tables, side drawers, and more. Live editor, export to HTML, JSX, or Tailwind. Free.

---

## UI Snippets Components

Browse and copy 442+ free HTML, CSS & JS components with live preview and export to HTML, JSX, or React + Tailwind CSS.

Library: https://fwdtools.com/ui-snippets/

### Categories

- [Buttons Snippets](https://fwdtools.com/ui-snippets/buttons/) : 24 free buttons UI snippets — HTML, CSS & JS, copy-paste ready
- [Forms Snippets](https://fwdtools.com/ui-snippets/forms/) : 86 free forms UI snippets — HTML, CSS & JS, copy-paste ready
- [Cards Snippets](https://fwdtools.com/ui-snippets/cards/) : 55 free cards UI snippets — HTML, CSS & JS, copy-paste ready
- [Navigation Snippets](https://fwdtools.com/ui-snippets/navigation/) : 41 free navigation UI snippets — HTML, CSS & JS, copy-paste ready
- [Modals Snippets](https://fwdtools.com/ui-snippets/modals/) : 28 free modals UI snippets — HTML, CSS & JS, copy-paste ready
- [Tables Snippets](https://fwdtools.com/ui-snippets/tables/) : 20 free tables UI snippets — HTML, CSS & JS, copy-paste ready
- [Charts Snippets](https://fwdtools.com/ui-snippets/charts/) : 30 free charts UI snippets — HTML, CSS & JS, copy-paste ready
- [Loaders Snippets](https://fwdtools.com/ui-snippets/loaders/) : 20 free loaders UI snippets — HTML, CSS & JS, copy-paste ready
- [Animations Snippets](https://fwdtools.com/ui-snippets/animations/) : 45 free animations UI snippets — HTML, CSS & JS, copy-paste ready
- [Layouts Snippets](https://fwdtools.com/ui-snippets/layouts/) : 37 free layouts UI snippets — HTML, CSS & JS, copy-paste ready
- [Dashboards Snippets](https://fwdtools.com/ui-snippets/dashboards/) : 30 free dashboards UI snippets — HTML, CSS & JS, copy-paste ready
- [Pricing Snippets](https://fwdtools.com/ui-snippets/pricing/) : 12 free pricing UI snippets — HTML, CSS & JS, copy-paste ready
- [Heroes Snippets](https://fwdtools.com/ui-snippets/heroes/) : 14 free heroes UI snippets — HTML, CSS & JS, copy-paste ready
- [🛠 Dev Snippets](https://fwdtools.com/ui-snippets/dev/) : 0 free 🛠 dev UI snippets — HTML, CSS & JS, copy-paste ready

### Buttons

- [Button Group](https://fwdtools.com/ui-snippets/button-group/) : Primary, secondary, ghost and danger buttons sharing one base class, plus icon and disabled states. Pure CSS. Exports to React, Vue & Tailwind.
- [Loading Button](https://fwdtools.com/ui-snippets/loading-button/) : Three-state loading button: idle, CSS spinner, success tick — with double-click prevention. Copy-paste or export to React, Vue & Tailwind.
- [Ripple Button](https://fwdtools.com/ui-snippets/ripple-button/) : Material-style ripple expanding from the exact click position in 10 lines of JS — solid and outline variants. Exports to React, Vue & Tailwind.
- [Badges & Chips](https://fwdtools.com/ui-snippets/badge-chips/) : Status badges, removable filter chips and pulse-dot indicators with rgba tinted backgrounds — pure CSS. Exports to React, Vue, Angular & Tailwind.
- [Social Login Buttons](https://fwdtools.com/ui-snippets/social-buttons/) : Google, GitHub and X OAuth buttons with SVG icons, an OR divider and email fallback form. Copy-paste or export to React, Vue, Angular & Tailwind.
- [Magnetic Button](https://fwdtools.com/ui-snippets/magnetic-button/) : Button that pulls toward the cursor using vector math and getBoundingClientRect, with smooth snap-back. Exports to React, Vue, Angular & Tailwind.
- [Neon Glow Buttons](https://fwdtools.com/ui-snippets/neon-glow/) : Cyberpunk neon buttons with layered box-shadow and text-shadow in cyan, pink, green and purple — pure CSS. Exports to React, Vue & Tailwind.
- [Confetti Button](https://fwdtools.com/ui-snippets/confetti-button/) : Click burst of 80 confetti particles with polar-coordinate trajectories via CSS custom properties. Copy-paste or export to React, Vue & Tailwind.
- [Copy to Clipboard Button](https://fwdtools.com/ui-snippets/copy-button/) : Copy-to-clipboard button using the Clipboard API with tick feedback and timeout reset. Copy-paste or export to React, Vue, Angular & Tailwind.
- [Expanding FAB](https://fwdtools.com/ui-snippets/expanding-fab/) : Floating action button expanding into staggered sub-actions with tooltips and blur backdrop. Copy-paste or export to React, Vue & Tailwind.
- [Notification Badge](https://fwdtools.com/ui-snippets/notification-badge/) : Count badges, pulsing dots and status indicators with scale-pop updates on icon buttons and nav items. Exports to React, Vue & Tailwind.
- [Split Action Button with Dropdown](https://fwdtools.com/ui-snippets/split-button/) : Split action button with a primary action plus dropdown arrow, aria-expanded, and outside-click close. Pure HTML CSS JS — exports to React, Vue & Angular.
- [Like / Favorite Button](https://fwdtools.com/ui-snippets/favorite-button/) : Heart like button with a radial particle burst, expanding ring, spring heart-pop, and a count that rolls to "1.2k". Exports to React, Vue & Tailwind.
- [Add to Cart Button](https://fwdtools.com/ui-snippets/add-to-cart-button/) : Add-to-cart button with a loading→checkmark state machine, a dot that flies into the cart icon, and a springing badge counter. Exports to React, Vue & Tailwind.
- [Emoji Reaction Bar](https://fwdtools.com/ui-snippets/emoji-reaction-bar/) : Facebook-style emoji reaction bar: hover or tap to reveal a reaction popover with tooltips, pick one, and update the count cluster. Exports to React, Vue & Tailwind.
- [Download Button](https://fwdtools.com/ui-snippets/download-button/) : Download button morphing through idle → progress-ring → success, with a JS-driven SVG ring, eased percentage & auto-reset. Exports to React, Vue & Tailwind.
- [Gradient Button](https://fwdtools.com/ui-snippets/gradient-button/) : Three animated CSS gradient buttons — moving gradient, shine sweep, and gradient border — with hover lifts and no JS. Exports to React, Vue, Angular & Tailwind.
- [3D Push Button](https://fwdtools.com/ui-snippets/3d-button/) : A tactile 3D push button in pure CSS — the top face drops onto a darker shadow face on click, like a real key. Exports to React, Vue, Angular & Tailwind.
- [Animated Hamburger Menu](https://fwdtools.com/ui-snippets/animated-hamburger/) : A hamburger button that morphs its three bars into an X on click with pure-CSS transforms, plus an accessible toggle. Exports to React, Vue, Angular & Tailwind.
- [Floating Action Button Radial Menu](https://fwdtools.com/ui-snippets/floating-action-btn/) : FAB that expands into a 5-item radial arc menu with spring-staggered animation, backdrop blur, tooltips, and keyboard dismiss. Exports to React, Vue & Angular.
- [Add to Calendar Button](https://fwdtools.com/ui-snippets/add-to-calendar-button/) : An "Add to calendar" dropdown that creates Google, Outlook, Office 365, Yahoo, and Apple .ics calendar events. Exports to React, Vue & Tailwind.
- [Color Mode Toggle](https://fwdtools.com/ui-snippets/color-mode-toggle/) : A three-way light/dark/system theme switch with a sliding thumb that follows the OS setting in System mode. Exports to React, Vue & Tailwind.
- [Fly to Cart Button](https://fwdtools.com/ui-snippets/fly-to-cart-button/) : An add-to-cart button that animates a flying clone of the product into the cart icon, then bumps the cart count. Exports to React, Vue & Tailwind.
- [Social Login Buttons](https://fwdtools.com/ui-snippets/social-login-buttons/) : Branded social login buttons for Google, Apple, and GitHub with official logos, loading states, and an email fallback. Exports to React, Vue & Tailwind.

### Forms

- [Floating Label Input](https://fwdtools.com/ui-snippets/floating-label/) : Animated floating label using :placeholder-shown and a sibling selector — zero JavaScript, any input type. Exports to React, Vue & Tailwind.
- [Toggle Switch](https://fwdtools.com/ui-snippets/toggle-switch/) : iOS-style toggle built on a hidden checkbox with :checked sibling styling — keyboard accessible, no JS. Exports to React, Vue, Angular & Tailwind.
- [Search Box](https://fwdtools.com/ui-snippets/search-box/) : Search input with live list filtering, focus ring glow and a Cmd+K shortcut badge — 5 lines of JS. Copy-paste or export to React, Vue & Tailwind.
- [Star Rating](https://fwdtools.com/ui-snippets/star-rating/) : Interactive star rating with hover preview, click to set and descriptive labels from Poor to Excellent. Exports to React, Vue, Angular & Tailwind.
- [OTP / PIN Input](https://fwdtools.com/ui-snippets/otp-input/) : Six-box verification code input with auto-focus advance, paste-to-fill and backspace navigation. Copy-paste or export to React, Vue & Tailwind.
- [Range Slider](https://fwdtools.com/ui-snippets/range-slider/) : Styled range inputs with custom track and thumb, live value display and tick marks — three variants. Exports to React, Vue, Angular & Tailwind.
- [File Dropzone](https://fwdtools.com/ui-snippets/file-dropzone/) : Drag-and-drop upload zone with file list, type colour badges, size formatting and click-to-browse. Exports to React, Vue, Angular & Tailwind.
- [Password Strength Meter](https://fwdtools.com/ui-snippets/password-strength/) : Live password strength meter scoring four regex rules with coloured bars, checklist and show/hide toggle. Exports to React, Vue & Tailwind.
- [Multi-step Form](https://fwdtools.com/ui-snippets/multi-step-form/) : Three-step form wizard with dot stepper, done/active states and back/next navigation guards. Copy-paste or export to React, Vue & Tailwind.
- [Tag / Chip Input](https://fwdtools.com/ui-snippets/tag-input/) : Tag chips input — Enter or comma adds, duplicates rejected, backspace removes the last tag. Copy-paste or export to React, Vue, Angular & Tailwind.
- [Color Picker Input](https://fwdtools.com/ui-snippets/color-picker-input/) : Colour field with preset swatches, hex input, live preview bar and a native picker trigger. Copy-paste or export to React, Vue, Angular & Tailwind.
- [Segmented Control](https://fwdtools.com/ui-snippets/segmented-control/) : iOS-style segmented control with sliding pill indicator, supporting multiple independent instances. Exports to React, Vue, Angular & Tailwind.
- [Credit Card Form](https://fwdtools.com/ui-snippets/credit-card-input/) : Card form with live number formatting, Visa/Mastercard/Amex detection and a masked card preview. Exports to React, Vue, Angular & Tailwind.
- [Date Picker](https://fwdtools.com/ui-snippets/date-picker/) : Calendar dropdown with month navigation, today highlight, selected state and Today/Clear actions. Exports to React, Vue, Angular & Tailwind.
- [Multi-Select Dropdown](https://fwdtools.com/ui-snippets/multi-select-dropdown/) : Multi-select with removable tag chips, inline search, select-all and clear-all — custom checkboxes. Exports to React, Vue, Angular & Tailwind.
- [Autocomplete Input](https://fwdtools.com/ui-snippets/autocomplete-input/) : Typeahead search with highlighted matches, arrow-key navigation and country flag display. Copy-paste or export to React, Vue, Angular & Tailwind.
- [Quantity Stepper](https://fwdtools.com/ui-snippets/quantity-stepper/) : Product quantity inputs in four styles with min/max clamping, stock indicator and live price. Exports to React, Vue, Angular & Tailwind.
- [Color Swatch Selector](https://fwdtools.com/ui-snippets/color-swatch/) : Product colour swatches with selected ring, out-of-stock cross, size chips and live preview card. Exports to React, Vue, Angular & Tailwind.
- [Signature Pad](https://fwdtools.com/ui-snippets/signature-pad/) : Canvas signature pad with smoothed strokes, touch support, undo, ink colours and PNG download. Exports to React, Vue, Angular & Tailwind.
- [QR Code Generator](https://fwdtools.com/ui-snippets/qr-code-generator/) : Live QR generator — type text or a URL and a scannable code renders instantly with custom colours and PNG download. Exports to React & Vue.
- [Theme Palette Generator](https://fwdtools.com/ui-snippets/theme-palette-generator/) : Turns one base colour into a 9-step tint and shade ramp via HSL interpolation with click-to-copy hex. Exports to React, Vue & Tailwind.
- [Markdown Live Preview](https://fwdtools.com/ui-snippets/markdown-live-preview/) : Split-pane markdown editor rendering headings, bold, links, lists and code on every keystroke. Exports to React, Vue, Angular & Tailwind.
- [Emoji Picker](https://fwdtools.com/ui-snippets/emoji-picker/) : Categorised emoji grid with search, recents tab and insert-at-cursor in a chat input demo. Copy-paste or export to React, Vue & Tailwind.
- [Password Generator](https://fwdtools.com/ui-snippets/password-generator/) : Secure password generator using crypto.getRandomValues with length slider, strength meter and history. Exports to React, Vue & Tailwind.
- [Time Picker](https://fwdtools.com/ui-snippets/time-picker/) : Time input with scrollable hour and minute columns, AM/PM toggle and Now button — no library. Exports to React, Vue, Angular & Tailwind.
- [Rich Text Editor](https://fwdtools.com/ui-snippets/rich-text-editor/) : contenteditable WYSIWYG with bold, headings, lists, links, undo/redo and HTML output — no library. Exports to React, Vue, Angular & Tailwind.
- [Image Cropper](https://fwdtools.com/ui-snippets/image-cropper/) : Upload an image, drag the crop box, resize with 8 handles and extract the crop via Canvas drawImage. Exports to React, Vue, Angular & Tailwind.
- [Phone Number Input](https://fwdtools.com/ui-snippets/phone-input/) : International phone field with country selector, per-country format mask and live validation. Exports to React, Vue, Angular & Tailwind.
- [Date Range Picker](https://fwdtools.com/ui-snippets/date-range-picker/) : Date range picker with dual-month calendar popup, hover preview, keyboard navigation, click-outside close, and month navigation. No dependencies.
- [Glassmorphism Login Form](https://fwdtools.com/ui-snippets/glassmorphism-login/) : Glassmorphism login with backdrop-filter blur, animated CSS blobs, 3D flip card on success, form validation, eye toggle, and OAuth buttons. No library.
- [Color Wheel Picker](https://fwdtools.com/ui-snippets/color-wheel-picker/) : Build an HSL color wheel picker on HTML5 Canvas with a hue ring, saturation-brightness square, hex input, RGB output and recent colors in pure JavaScript
- [Speech to Text](https://fwdtools.com/ui-snippets/speech-to-text/) : Build a live speech to text transcriber with the Web Speech API in JavaScript. Continuous recognition, interim results, language selection and a fallback
- [Image Filter Editor](https://fwdtools.com/ui-snippets/image-filter-editor/) : Build an image filter editor in JavaScript with CSS filters, live sliders, drag-and-drop upload, canvas rendering and PNG download. No libraries required
- [Pattern Lock](https://fwdtools.com/ui-snippets/pattern-lock/) : Build an Android-style 9-dot pattern lock on HTML5 Canvas with JavaScript. Gesture tracing, validation, lockout, shake feedback and change-PIN flow
- [Auto-Resize Textarea](https://fwdtools.com/ui-snippets/auto-resize-textarea/) : Auto-growing textarea using scrollHeight measurement, 3-threshold character counter, connected border design, and success state. Exports to React, Vue & Tailwind.
- [Multi-Range Price Slider](https://fwdtools.com/ui-snippets/multi-range-slider/) : Dual-handle price range slider with draggable handles, live product filtering, keyboard navigation, touch support, and animated fill track. Exports to React, Vue & Angular.
- [Newsletter Signup Card](https://fwdtools.com/ui-snippets/newsletter-signup/) : Email signup form with inline validation, loading spinner, animated SVG checkmark success state, and social proof counter. Exports to React, Vue, Angular & Tailwind.
- [Contact Form](https://fwdtools.com/ui-snippets/contact-form/) : Full contact form with inline validation, character counter, privacy checkbox, loading state, and success banner. Sidebar contact details panel. Exports to React, Vue & Angular.
- [Checkout Payment Form](https://fwdtools.com/ui-snippets/checkout-form/) : Two-panel checkout form with card auto-formatting, expiry masking, card type detection, promo code, order summary, and success confirmation. Exports to React & Vue.
- [Email Subscription Widget](https://fwdtools.com/ui-snippets/subscription-widget/) : Email newsletter signup widget with live validation, an animated success state, and social-proof avatars. Pure HTML CSS JS — exports to React, Vue & Angular.
- [Tip Calculator](https://fwdtools.com/ui-snippets/tip-calculator/) : Bill tip calculator with preset %, custom tip, bill split by people, and live per-person totals. Exports to React, Vue, Angular & Tailwind.
- [Interest Selector](https://fwdtools.com/ui-snippets/interest-selector/) : Onboarding interest/topic multi-selector with pill chips, minimum selection validation, and live count. Exports to React, Vue, Angular & Tailwind.
- [Media Upload Grid](https://fwdtools.com/ui-snippets/media-upload-grid/) : Multi-file image upload with drag-and-drop, thumbnail preview grid, remove buttons, and upload progress feedback. Exports to React, Vue & Angular.
- [Mortgage Calculator](https://fwdtools.com/ui-snippets/mortgage-calculator/) : Mortgage payment calculator with down payment slider, 15/30-year terms, amortization breakdown, and payoff date. Exports to React, Vue & Angular.
- [BMI Calculator](https://fwdtools.com/ui-snippets/bmi-calculator/) : Body mass index calculator with metric/imperial toggle, animated category gauge, and health advice. Exports to React, Vue, Angular & Tailwind.
- [Inline Edit Field](https://fwdtools.com/ui-snippets/inline-edit-field/) : Click-to-edit inline text field with input, textarea, and date variants, save/cancel actions, Escape key, and saved toast. Exports to React, Vue & Angular.
- [Auth Login Card](https://fwdtools.com/ui-snippets/auth-login-card/) : Auth login card with social sign-in buttons, email/password form, show/hide password, validation, and loading state. Exports to React, Vue & Angular.
- [Mention Autocomplete](https://fwdtools.com/ui-snippets/mention-autocomplete/) : Contenteditable @mention autocomplete with user search popup, keyboard navigation, mention chip, and comment feed. Exports to React, Vue & Angular.
- [Faceted Filter Sidebar](https://fwdtools.com/ui-snippets/faceted-filter-sidebar/) : Faceted filter sidebar — collapsible facets, dual-handle price range, swatches, rating filter, active chips & clear-all. Exports to React, Vue & Tailwind.
- [Review Form](https://fwdtools.com/ui-snippets/review-form/) : Review form with a hover-preview star rating, character-counted comment box, validation, and an animated thank-you state. Exports to React, Vue & Tailwind.
- [Product Variant Selector](https://fwdtools.com/ui-snippets/variant-selector/) : Product variant selector with colour swatches, size pills, sold-out states, dynamic price, stock messages & size-gated add to bag. Exports to React, Vue & Tailwind.
- [Shipping Method Selector](https://fwdtools.com/ui-snippets/shipping-method-selector/) : Shipping method selector built from accessible radio cards with icons, ETAs & prices that update the live order total. Exports to React, Vue & Tailwind.
- [Rotary Knob Input](https://fwdtools.com/ui-snippets/rotary-knob/) : Skeuomorphic rotary knob input with a conic-gradient arc, drag/scroll/arrow-key control over a 270° sweep, and live value readout. Exports to React, Vue & Tailwind.
- [Country Selector](https://fwdtools.com/ui-snippets/country-selector/) : Searchable country dropdown with flag emojis, dial codes, live filtering by name or code, and click-outside / ESC close. Exports to React, Vue & Tailwind.
- [Time Slot Picker](https://fwdtools.com/ui-snippets/time-slot-picker/) : Appointment time-slot picker with a day selector, morning/afternoon grids, struck-through booked slots, and a gated confirm. Exports to React, Vue & Tailwind.
- [Slide to Confirm](https://fwdtools.com/ui-snippets/slide-to-confirm/) : Slide-to-confirm drag control: drag the handle across the track to commit, with a green fill, snap-back & a locked state. Exports to React, Vue & Tailwind.
- [Currency Input](https://fwdtools.com/ui-snippets/currency-input/) : Currency input that auto-formats as you type: thousands separators, two-decimal clamp, currency switcher & a clean stored value. Exports to React, Vue & Tailwind.
- [Calculator](https://fwdtools.com/ui-snippets/calculator/) : Working calculator with a chained-operation engine, operator highlight, history line, error handling & full keyboard support. Exports to React, Vue & Tailwind.
- [AI Prompt Composer](https://fwdtools.com/ui-snippets/ai-prompt-composer/) : AI prompt composer with an auto-growing textarea, model picker, file attachments, a live token counter & Enter-to-send. Exports to React, Vue & Tailwind.
- [Custom Checkbox](https://fwdtools.com/ui-snippets/custom-checkbox/) : Accessible custom checkboxes in pure CSS with an animated SVG checkmark that draws on check, plus focus and disabled states. Exports to React, Vue & Tailwind.
- [Custom Radio Buttons](https://fwdtools.com/ui-snippets/custom-radio/) : Accessible custom radio buttons as selectable cards in pure CSS, with a springy dot and a :has() card highlight. Exports to React, Vue, Angular & Tailwind.
- [Custom Select Dropdown](https://fwdtools.com/ui-snippets/custom-select/) : A fully styled custom select dropdown with animated open, rotating caret, outside-click and keyboard close. Exports to React, Vue, Angular & Tailwind.
- [Password Show/Hide Toggle](https://fwdtools.com/ui-snippets/password-toggle/) : An accessible password input with a show/hide eye toggle that swaps input type and icons, with proper aria-pressed. Exports to React, Vue, Angular & Tailwind.
- [Textarea Character Counter](https://fwdtools.com/ui-snippets/textarea-counter/) : A textarea with a live character counter, a maxlength limit, and amber/red warning states near the limit. Exports to React, Vue, Angular & Tailwind.
- [Custom File Input](https://fwdtools.com/ui-snippets/file-input/) : A styled custom file input that shows the chosen file name and size with a clear button, on a real file field. Exports to React, Vue, Angular & Tailwind.
- [Avatar Upload](https://fwdtools.com/ui-snippets/avatar-upload/) : A circular avatar upload with instant local image preview, a camera edit badge, and a remove button, on a real file input. Exports to React, Vue & Tailwind.
- [Cascading Select](https://fwdtools.com/ui-snippets/cascading-select/) : Dependent cascading dropdowns (Country → State → City): each select populates and enables the next, resetting children on change. Exports to React, Vue & Tailwind.
- [PIN Pad](https://fwdtools.com/ui-snippets/pin-pad/) : Secure numeric PIN pad with filling dots, shake-on-error, success unlock state, backspace, and full keyboard support — vanilla JS. Exports to React, Vue & Tailwind.
- [Flight Search Form](https://fwdtools.com/ui-snippets/flight-search-form/) : A round-trip/one-way flight search form with a swap button, a passenger stepper popover, and date validation. Exports to React, Vue & Tailwind.
- [Address Autocomplete](https://fwdtools.com/ui-snippets/address-autocomplete/) : A debounced address autocomplete with match highlighting, keyboard navigation, and a confirmed-selection chip. Exports to React, Vue & Tailwind.
- [Seat Picker](https://fwdtools.com/ui-snippets/seat-picker/) : An interactive cinema-style seat map with premium-row pricing, a selection cap, taken-seat blocking, and a running total. Exports to React, Vue & Tailwind.
- [Magic Link Login](https://fwdtools.com/ui-snippets/magic-link-login/) : A passwordless "magic link" sign-in form with email validation, a check-your-email state, and a resend cooldown timer. Exports to React, Vue & Tailwind.
- [Voice Memo Recorder](https://fwdtools.com/ui-snippets/voice-memo-recorder/) : A voice-memo recorder UI with a live animated waveform, a pulsing record button, and playback scrubbing over the captured bars. Exports to React, Vue & Tailwind.
- [Split Payment Calculator](https://fwdtools.com/ui-snippets/split-payment-calculator/) : A bill-splitting calculator with tip presets, a people stepper, and an uneven-split mode that validates shares total 100%. Exports to React, Vue & Tailwind.
- [Form Autosave Indicator](https://fwdtools.com/ui-snippets/form-autosave-indicator/) : A debounced autosave status indicator ("Saving…" → "All changes saved") with an error-retry state and a leave-page guard. Exports to React, Vue & Tailwind.
- [Promo Code Input](https://fwdtools.com/ui-snippets/promo-code-input/) : A checkout promo-code field that validates coupons, applies percent/fixed/shipping discounts, and updates the order total live. Exports to React, Vue & Tailwind.
- [Conditional Form Fields](https://fwdtools.com/ui-snippets/conditional-form-fields/) : A dynamic form that shows and hides fields based on a dropdown choice, validating only the visible required fields. Exports to React, Vue & Tailwind.
- [Availability Scheduler](https://fwdtools.com/ui-snippets/availability-scheduler/) : A weekly availability grid you paint by click-dragging to mark free time slots per day, with a live hours total. Exports to React, Vue & Tailwind.
- [Password Requirements Checklist](https://fwdtools.com/ui-snippets/password-requirements-checklist/) : A password field with a live requirements checklist that ticks off rules as you type, plus a strength meter and a show/hide toggle. Exports to React, Vue & Tailwind.
- [Radio Card Group](https://fwdtools.com/ui-snippets/radio-card-group/) : An accessible radio-card group for plan or option selection, with checked styling, a popular flag, and keyboard support. Exports to React, Vue & Tailwind.
- [Donation Amount Picker](https://fwdtools.com/ui-snippets/donation-amount-picker/) : A donation form with preset and custom amounts, one-time/monthly toggle, and a live impact message. Exports to React, Vue & Tailwind.
- [Waitlist Signup](https://fwdtools.com/ui-snippets/waitlist-signup/) : A waitlist signup form with email validation, social proof, a queue-position reveal, and a referral link to skip ahead. Exports to React, Vue & Tailwind.
- [Multi Email Input](https://fwdtools.com/ui-snippets/multi-email-input/) : A multi-email input that turns addresses into removable chips, validates each, dedupes, and splits pasted lists. Exports to React, Vue & Tailwind.
- [OTP Verification Screen](https://fwdtools.com/ui-snippets/otp-verification/) : A 6-digit OTP verification screen with auto-advance, paste-to-fill, auto-submit, error shake, and a resend countdown. Exports to React, Vue & Tailwind.
- [Input Mask Fields](https://fwdtools.com/ui-snippets/input-mask/) : Self-formatting inputs that mask phone, card, expiry, date, and currency values as you type — no library. Exports to React, Vue & Tailwind.
- [Notification Preferences](https://fwdtools.com/ui-snippets/notification-preferences/) : A notification settings matrix with per-event email, push, and SMS toggles, a dirty-state save gate, and ARIA switches. Exports to React, Vue & Tailwind.

### Cards

- [Profile Card](https://fwdtools.com/ui-snippets/profile-card/) : User profile card with gradient avatar initials, three-stat row and follow button — pure CSS, no images. Export to React, Vue & Tailwind included.
- [Glass Card](https://fwdtools.com/ui-snippets/glass-card/) : Frosted glass card with backdrop-filter blur, rgba tint and border, Safari prefix included. Copy-paste or export to React, Vue & Tailwind.
- [Gradient Border Card](https://fwdtools.com/ui-snippets/gradient-border-card/) : Animated conic-gradient border using a ::before pseudo-element with negative inset — no JavaScript. Copy-paste or export to React, Vue & Tailwind.
- [Testimonial Card](https://fwdtools.com/ui-snippets/testimonial-card/) : Customer quote card with five stars, decorative quote mark and gradient avatar initials — pure CSS, no images. Exports to React, Vue & Tailwind.
- [3D Flip Card](https://fwdtools.com/ui-snippets/3d-flip-card/) : Click-to-flip card using preserve-3d, backface-visibility and rotateY — front and back faces, no framework. Exports to React, Vue & Tailwind.
- [Music Player Card](https://fwdtools.com/ui-snippets/music-player/) : Music player UI with spinning vinyl, play/pause icon swap, track switching and progress bar — no audio API. Exports to React, Vue & Tailwind.
- [Product Card](https://fwdtools.com/ui-snippets/product-card/) : Shop card with colour swatches, wishlist heart toggle, sale badge and add-to-cart feedback state. Exports to React, Vue, Angular & Tailwind.
- [Social Post Card](https://fwdtools.com/ui-snippets/social-post-card/) : Tweet-style post card with like toggle and count, follow button, hashtag styling and action row. Exports to React, Vue, Angular & Tailwind.
- [Event Card](https://fwdtools.com/ui-snippets/event-card/) : Event card with gradient header, date badge, overlapping attendee avatars and RSVP button — no JavaScript. Exports to React, Vue & Tailwind.
- [Article / Blog Card](https://fwdtools.com/ui-snippets/article-card/) : Blog card with category tag, excerpt, author avatar and read-time meta in a responsive grid — no JS. Exports to React, Vue, Angular & Tailwind.
- [Testimonial Slider](https://fwdtools.com/ui-snippets/testimonial-slider/) : Auto-advancing carousel with dots, arrows, keyboard navigation and touch swipe — no library. Exports to React, Vue, Angular & Tailwind.
- [Avatar Group](https://fwdtools.com/ui-snippets/avatar-group/) : Overlapping avatar stacks with +N overflow, hover tooltips and an animated add-member variant. Exports to React, Vue, Angular & Tailwind.
- [Confetti Celebration Card](https://fwdtools.com/ui-snippets/confetti-celebration-card/) : Milestone card firing a physics confetti burst on Canvas with gravity, rotation and fade-out. Exports to React, Vue, Angular & Tailwind.
- [Image Magnifier](https://fwdtools.com/ui-snippets/image-magnifier/) : Product image zoom with hover lens, side preview panel and thumbnail strip via background-position. Exports to React, Vue, Angular & Tailwind.
- [Poll Widget](https://fwdtools.com/ui-snippets/poll-widget/) : Click-to-vote poll with animated percentage bars, winner highlight and vote counts. Copy-paste or export to React, Vue, Angular & Tailwind.
- [Swipe Cards](https://fwdtools.com/ui-snippets/swipe-cards/) : Tinder-style swipe card stack with pointer/touch events, rotation math, velocity snap, accept/reject threshold, CSS transform, and stack depth. No library.
- [Stacked Cards Deck](https://fwdtools.com/ui-snippets/stacked-cards/) : CSS transform stack with scale/Y offset layers, swipe gesture, exit animation, and prev/next controls. Exports to React, Vue, Angular & Tailwind.
- [Image Hover Reveal Cards](https://fwdtools.com/ui-snippets/image-hover-reveal/) : Image cards with staggered overlay text reveal on hover — gradient overlay, scale zoom, translateY stagger, tag badge, description, and keyboard accessible. Free HTML CSS snippet.
- [Team Member Cards](https://fwdtools.com/ui-snippets/team-card/) : Team member cards with avatar, online status dot, role badge, bio, stats row, social links, and "View Profile" button. Staggered load animation. Free HTML CSS JS snippet.
- [Feature Highlight Cards](https://fwdtools.com/ui-snippets/feature-cards/) : Feature card grid with colour-coded icon badges, mouse-tracking radial glow, tag chips, arrow CTA links, wide card variant, and dark card variant. Free HTML CSS JS snippet.
- [Customer Review Card](https://fwdtools.com/ui-snippets/review-card/) : Customer review card with star ratings, verified badge, helpful vote toggle, tag chips, and featured/negative variants. Pure HTML CSS JS, exports to React & Vue.
- [Job Listing Card](https://fwdtools.com/ui-snippets/job-listing-card/) : Job listing card with company logo, salary, job-type badge, skill tags, save toggle, and filter bar. Featured variant included. Pure HTML CSS JS, exports to React & Vue.
- [Testimonial Masonry Wall](https://fwdtools.com/ui-snippets/testimonial-masonry/) : Three-column testimonial masonry grid with star ratings, gradient avatars, featured card, dark card variant, and partial star. Free HTML CSS, exports to React & Vue.
- [Star Rating Breakdown Card](https://fwdtools.com/ui-snippets/rating-breakdown/) : Amazon-style rating breakdown card with an animated bar chart, sentiment badges, and a review snippet. Pure CSS bars — exports to React, Vue & Angular.
- [Location & Address Card](https://fwdtools.com/ui-snippets/location-card/) : Location card with a CSS-drawn map, animated pin drop, address details, distance badge, and action buttons. Pure HTML CSS JS — exports to React, Vue & Angular.
- [Mini Cart](https://fwdtools.com/ui-snippets/mini-cart/) : Shopping cart flyout dropdown with quantity steppers, per-item removal, free shipping badge, and live subtotal. Exports to React, Vue, Angular & Tailwind.
- [Weather Widget](https://fwdtools.com/ui-snippets/weather-widget/) : Glassmorphism weather card with temperature, condition, humidity, wind, UV, and 5-day inline SVG forecast. Exports to React, Vue, Angular & Tailwind.
- [Invoice Preview](https://fwdtools.com/ui-snippets/invoice-preview/) : Printable invoice card with line items table, tax, discount, totals, payment terms, and PDF print button. Exports to React, Vue & Angular.
- [Comment Thread](https://fwdtools.com/ui-snippets/comment-thread/) : Nested comment thread with replies, upvote/downvote, sort by top or newest, and auto-growing composer. Exports to React, Vue, Angular & Tailwind.
- [Terminal Window](https://fwdtools.com/ui-snippets/terminal-window/) : Animated macOS-style terminal with realistic typing effect, command output, blinking cursor, and replay button. Exports to React, Vue & Angular.
- [Boarding Pass](https://fwdtools.com/ui-snippets/boarding-pass/) : Airline boarding pass UI with flight route, perforated tear-off stub, barcode, and seat details. Pure CSS. Exports to React, Vue, Angular & Tailwind.
- [Quiz Card](https://fwdtools.com/ui-snippets/quiz-card/) : Interactive multiple-choice quiz with progress bar, instant answer feedback, scoring, and an animated results ring. Exports to React, Vue & Angular.
- [Nutrition Label](https://fwdtools.com/ui-snippets/nutrition-label/) : Pixel-accurate FDA nutrition facts label in pure HTML and CSS with daily values, indentation, and bold rules. Exports to React, Vue, Angular & Tailwind.
- [NPS Survey Widget](https://fwdtools.com/ui-snippets/nps-survey/) : Net Promoter Score survey with 0–10 scale, detractor/passive/promoter logic, follow-up question, and thank-you state. Exports to React, Vue & Angular.
- [Changelog / Release Notes](https://fwdtools.com/ui-snippets/changelog-feed/) : Versioned changelog feed with feature/improvement/fix badges, timeline connector, filter tabs, and bullet-point items. Exports to React, Vue & Angular.
- [Multi-Tab Code Block](https://fwdtools.com/ui-snippets/code-block-tabs/) : Multi-file code block with tabbed navigation, token-based syntax highlighting, line numbers, traffic lights, and copy button. Exports to React, Vue & Angular.
- [Order Summary](https://fwdtools.com/ui-snippets/order-summary/) : Order summary card with quantity steppers, per-line totals, promo-code discount, and live subtotal, tax & total recalculation. Exports to React, Vue & Tailwind.
- [Order Tracking Timeline](https://fwdtools.com/ui-snippets/order-tracking-timeline/) : Order tracking timeline with an animated progress rail, checkmark steps, a pulsing current stage, status pill & ETA. Exports to React, Vue & Tailwind.
- [Stock Urgency Bar](https://fwdtools.com/ui-snippets/stock-urgency-bar/) : Stock urgency widget with an animated sold/remaining bar, colour escalation, low-stock warning, live viewer pulse & sold-out state. Exports to React, Vue & Tailwind.
- [Loyalty Points Widget](https://fwdtools.com/ui-snippets/loyalty-points-widget/) : Loyalty widget with a points balance, tier-progress bar, redeemable rewards, affordability-gated buttons & a count-down balance. Exports to React, Vue & Tailwind.
- [Coverflow Carousel](https://fwdtools.com/ui-snippets/coverflow-carousel/) : 3D coverflow carousel: cards rotate, scale & recede in perspective around the active card, with prev/next, dots & arrow keys. Exports to React, Vue & Tailwind.
- [Referral Card](https://fwdtools.com/ui-snippets/referral-card/) : Referral card with a copyable link, avatar progress toward a reward milestone & an unlocked-reward state. Exports to React, Vue & Tailwind.
- [Gift Card Voucher](https://fwdtools.com/ui-snippets/gift-card/) : Gradient gift card voucher with an animated shine, a masked code that reveals then copies, amount, balance & expiry. Exports to React, Vue & Tailwind.
- [Neumorphism Card](https://fwdtools.com/ui-snippets/neumorphism-card/) : A neumorphic (soft UI) card using dual light/dark box-shadows for an extruded look, plus an inset icon well and pressable buttons. Exports to React, Vue & Tailwind.
- [Claymorphism Card](https://fwdtools.com/ui-snippets/claymorphism-card/) : A claymorphism (clay UI) card with the puffy 3D look from a soft outer shadow plus dual inner highlights, in pure CSS. Exports to React, Vue & Tailwind.
- [Avatar with Status](https://fwdtools.com/ui-snippets/status-avatar/) : Avatars with a presence dot for online, away, busy, and offline states, plus a pulsing online ring and initials fallback. Exports to React, Vue, Angular & Tailwind.
- [Callout / Admonition Box](https://fwdtools.com/ui-snippets/callout-box/) : Docs-style callout boxes in note, tip, warning, and danger variants with an icon, accent bar, and tinted background. Exports to React, Vue, Angular & Tailwind.
- [Feature List](https://fwdtools.com/ui-snippets/feature-list/) : A plan feature list with green checks for included items and muted X marks for excluded ones, in a card. Exports to React, Vue, Angular & Tailwind.
- [Onboarding Checklist Widget](https://fwdtools.com/ui-snippets/onboarding-checklist-widget/) : A collapsible "Getting started" checklist with a circular progress ring, strike-through completed tasks, and a finish state. Exports to React, Vue & Tailwind.
- [Team Presence List](https://fwdtools.com/ui-snippets/team-presence-list/) : A Slack-style team roster with online/away/dnd/offline status dots, status-sorted ordering, and a live name/role search filter. Exports to React, Vue & Tailwind.
- [Helpful Feedback Widget](https://fwdtools.com/ui-snippets/helpful-feedback-widget/) : A "Was this helpful?" yes/no widget that reveals reason tags and a comment box, then a thank-you — for docs and help centers. Exports to React, Vue & Tailwind.
- [Spotlight Hover Card](https://fwdtools.com/ui-snippets/spotlight-card/) : Cards with a radial spotlight glow that follows the cursor on hover, plus an illuminated border, using CSS variables. Exports to React, Vue & Tailwind.
- [Recently Viewed Carousel](https://fwdtools.com/ui-snippets/recently-viewed-carousel/) : A horizontal product carousel with scroll-snap, arrow paging that disables at the ends, save hearts, and hidden scrollbar. Exports to React, Vue & Tailwind.
- [Integration Cards](https://fwdtools.com/ui-snippets/integration-cards/) : A SaaS integrations grid with connect/disconnect cards, a connected state, category labels, and an all/connected filter. Exports to React, Vue & Tailwind.
- [Avatar Stack with Tooltip](https://fwdtools.com/ui-snippets/avatar-stack-tooltip/) : An overlapping avatar stack where each avatar lifts and reveals a name/role/status tooltip on hover, with a "+N more" overflow. Exports to React, Vue & Tailwind.

### Navigation

- [Hamburger Nav](https://fwdtools.com/ui-snippets/hamburger-nav/) : Animated hamburger nav — three lines morph to an X and a full-width mobile menu slides open over a blurred header. Exports to React, Vue & Tailwind.
- [Tab Bar](https://fwdtools.com/ui-snippets/tab-bar/) : Tabbed interface with active underline indicator and instant panel switching in a few lines of JS. Copy-paste or export to React, Vue & Tailwind.
- [Breadcrumb](https://fwdtools.com/ui-snippets/breadcrumb/) : Accessible breadcrumb with semantic ol/li markup, CSS-only separators and aria-current — zero JavaScript. Exports to React, Vue, Angular & Tailwind.
- [CSS Tooltip](https://fwdtools.com/ui-snippets/css-tooltip/) : Pure CSS tooltip reading its text from a data attribute — top, right, bottom and left placements with slide-fade. Exports to React, Vue & Tailwind.
- [Scroll Progress Bar](https://fwdtools.com/ui-snippets/scroll-progress/) : Fixed gradient reading-progress bar driven by a one-line scroll formula — 4 lines of JS total. Copy-paste or export to React, Vue & Tailwind.
- [Dropdown Menu](https://fwdtools.com/ui-snippets/dropdown-menu/) : Animated dropdown with scale-fade open, click-outside and ESC close, dividers and a danger item. Copy-paste or export to React, Vue & Tailwind.
- [Progress Stepper](https://fwdtools.com/ui-snippets/stepper/) : Multi-step wizard stepper with done, active and pending states and connecting line fill. Copy-paste or export to React, Vue, Angular & Tailwind.
- [Accordion / FAQ](https://fwdtools.com/ui-snippets/accordion-faq/) : Single-open FAQ accordion with max-height transitions and rotating chevrons — smooth and dependency-free. Exports to React, Vue, Angular & Tailwind.
- [Animated Tabs with Indicator](https://fwdtools.com/ui-snippets/animated-tabs/) : Tabs with a sliding pill indicator positioned from offsetLeft and offsetWidth — works for any label length. Exports to React, Vue & Tailwind.
- [Mobile Bottom Nav](https://fwdtools.com/ui-snippets/bottom-nav/) : iOS-style bottom tab bar with active indicator, notification badge and data-page panel switching. Exports to React, Vue, Angular & Tailwind.
- [Context Menu](https://fwdtools.com/ui-snippets/context-menu/) : Custom right-click menu with viewport edge clamping, ESC and click-outside close, scale pop-in. Exports to React, Vue, Angular & Tailwind.
- [Side Drawer](https://fwdtools.com/ui-snippets/side-drawer/) : Slide-in drawer with overlay, ESC and click-outside close, and a focus-trap pattern. Copy-paste or export to React, Vue, Angular & Tailwind.
- [Sticky Header](https://fwdtools.com/ui-snippets/sticky-header/) : Header that blurs, shrinks and gains shadow on scroll, with progress bar and mobile nav toggle. Exports to React, Vue, Angular & Tailwind.
- [Scroll to Top](https://fwdtools.com/ui-snippets/scroll-to-top/) : Back-to-top button with an SVG progress ring showing scroll position and smooth scroll on click. Exports to React, Vue, Angular & Tailwind.
- [Horizontal Timeline](https://fwdtools.com/ui-snippets/horizontal-timeline/) : Scrollable roadmap with done, active and upcoming states, progress bar and auto-scroll to current. Exports to React, Vue, Angular & Tailwind.
- [Scroll-Spy Navigation](https://fwdtools.com/ui-snippets/scroll-spy-nav/) : Sidebar nav that highlights the active section via IntersectionObserver with a gliding pill indicator. Exports to React, Vue & Tailwind.
- [Table of Contents](https://fwdtools.com/ui-snippets/table-of-contents/) : Auto-generated TOC from page headings with IntersectionObserver active highlight and smooth scroll. Exports to React, Vue, Angular & Tailwind.
- [Collapsible Tree Menu](https://fwdtools.com/ui-snippets/tree-menu/) : Collapsible file-tree menu with chevron folders, active file state, collapse-all and ARIA attributes. Exports to React, Vue & Tailwind.
- [Color Theme Switcher](https://fwdtools.com/ui-snippets/color-theme-switcher/) : Six accent themes plus dark mode via CSS custom properties with localStorage persistence. Copy-paste or export to React, Vue, Angular & Tailwind.
- [Notification Center](https://fwdtools.com/ui-snippets/notification-center/) : Slide-down notification panel with badge counter, mark-as-read, dismiss, and click-outside close. Exports to React, Vue, Angular & Tailwind.
- [Chip Filter](https://fwdtools.com/ui-snippets/chip-filter/) : Pill filter chips filtering a responsive card grid by category with live count badges and animated transitions. Exports to React, Vue, Angular & Tailwind.
- [Mega Menu](https://fwdtools.com/ui-snippets/mega-menu/) : Desktop mega dropdown with 3 link columns, featured card, hover-intent delay, CSS arrow pointer, and ARIA. Exports to React, Vue, Angular & Tailwind.
- [Circular Step Indicator](https://fwdtools.com/ui-snippets/circular-steps/) : SVG ring progress steps with animated stroke-dashoffset, check icons, and connector lines. Exports to React, Vue, Angular & Tailwind.
- [Floating Dock](https://fwdtools.com/ui-snippets/floating-dock/) : macOS-style icon magnification dock using Gaussian proximity math, CSS custom properties, and click bounce. Exports to React, Vue, Angular & Tailwind.
- [Collapsible Sidebar Nav](https://fwdtools.com/ui-snippets/sidebar-nav/) : Dashboard sidebar with collapse/expand animation, icon tooltips, badge indicators, active states, and user profile footer. Exports to React, Vue, Angular & Tailwind.
- [Sticky Promo Announcement Bar](https://fwdtools.com/ui-snippets/sticky-promo-bar/) : Sticky promo bar with gradient countdown, dark feature banner, and amber warning. Countdown timer, dismiss button, and CTA link. Exports to React & Vue.
- [Multi-Step Progress Wizard](https://fwdtools.com/ui-snippets/progress-wizard/) : Multi-step signup wizard with animated step indicator, connector fill, panel transitions, and plan selector. Pure HTML CSS JS — exports to React, Vue & Angular.
- [Mega Footer](https://fwdtools.com/ui-snippets/mega-footer/) : Multi-column mega footer with brand, social icons, newsletter form, four link groups, language selector, and bottom bar. Exports to React, Vue & Angular.
- [Product Compare Bar](https://fwdtools.com/ui-snippets/compare-bar/) : Floating product compare bar with a sticky thumbnail tray, max-items cap, per-item remove, and a 2+ gated compare button. Exports to React, Vue & Tailwind.
- [Social Share Bar](https://fwdtools.com/ui-snippets/social-share-bar/) : Social share bar with brand X, Facebook, LinkedIn & WhatsApp buttons, real share-intent URLs & a copy-link field with feedback. Exports to React, Vue & Tailwind.
- [CSS Hover Dropdown Menu](https://fwdtools.com/ui-snippets/css-hover-dropdown/) : A pure-CSS hover dropdown menu with a fade-and-slide panel, rotating caret, hover bridge and focus-within — no JS. Exports to React, Vue, Angular & Tailwind.
- [Pagination](https://fwdtools.com/ui-snippets/pagination/) : Numbered pagination with prev/next arrows, an active page, and smart ellipses that collapse long page ranges. Exports to React, Vue, Angular & Tailwind.
- [Vertical Tabs](https://fwdtools.com/ui-snippets/vertical-tabs/) : Accessible vertical tabs with an icon side rail, animated panels, ARIA roles, and arrow-key navigation. Exports to React, Vue, Angular & Tailwind.
- [Multi-Step Progress Indicator](https://fwdtools.com/ui-snippets/step-progress/) : Horizontal multi-step progress with completed/active/pending states, animated connector fill, and click-to-navigate. Exports to React, Vue & Angular.
- [Language Switcher](https://fwdtools.com/ui-snippets/language-switcher/) : A searchable language switcher dropdown with flag icons, native names, keyboard navigation, and a selected-state check. Exports to React, Vue & Tailwind.
- [Profile Dropdown Menu](https://fwdtools.com/ui-snippets/profile-dropdown/) : A user profile dropdown with avatar, account details, plan badge, navigation links, and sign-out — keyboard accessible. Exports to React, Vue & Tailwind.
- [Expandable Search Bar](https://fwdtools.com/ui-snippets/expandable-search/) : A search icon that expands into a full input on click or "/" shortcut, with a clear button and collapse-when-empty. Exports to React, Vue & Tailwind.
- [Page Dots Navigation](https://fwdtools.com/ui-snippets/page-dots-nav/) : A fixed vertical dot nav that tracks the current section with IntersectionObserver and jumps to it on click. Exports to React, Vue & Tailwind.
- [Dynamic Tabs](https://fwdtools.com/ui-snippets/dynamic-tabs/) : Browser-style dynamic tabs — add, close (× or middle-click), drag to reorder, and smart neighbour activation. Exports to React, Vue, Angular & Tailwind.
- [Keyboard Keys](https://fwdtools.com/ui-snippets/kbd-keys/) : Realistic keyboard key (kbd) UI for shortcut hints — 3D keycaps that press down when you hit the matching shortcut. Exports to React, Vue, Angular & Tailwind.
- [Tag Cloud](https://fwdtools.com/ui-snippets/tag-cloud/) : A weighted tag cloud that sizes and colours each tag by its count, with hover scale and click-to-filter. No library. Exports to React, Vue, Angular & Tailwind.

### Modals

- [Toast Notification](https://fwdtools.com/ui-snippets/toast-notification/) : Slide-in toasts with success, error and info types, auto-dismiss and animationend DOM cleanup. Copy-paste or export to React, Vue & Tailwind.
- [Modal / Dialog](https://fwdtools.com/ui-snippets/modal/) : Modal with blurred backdrop, scale-in animation, ESC and click-outside close — a complete dialog pattern. Exports to React, Vue, Angular & Tailwind.
- [Command Palette](https://fwdtools.com/ui-snippets/command-palette/) : Cmd+K command palette with live search, arrow-key navigation and grouped results — like Raycast or VS Code. Exports to React, Vue & Tailwind.
- [Cookie Consent Banner](https://fwdtools.com/ui-snippets/cookie-banner/) : Slide-up cookie banner with accept/dismiss actions, animationend cleanup and sessionStorage consent state. Exports to React, Vue & Tailwind.
- [Image Lightbox](https://fwdtools.com/ui-snippets/image-lightbox/) : Thumbnail grid opening a fullscreen lightbox with prev/next, arrow keys and ESC close. Copy-paste or export to React, Vue, Angular & Tailwind.
- [Bottom Sheet](https://fwdtools.com/ui-snippets/bottom-sheet/) : Mobile slide-up sheet with drag handle, backdrop dismiss and two content variants. Copy-paste or export to React, Vue, Angular & Tailwind.
- [Alert Banners](https://fwdtools.com/ui-snippets/alert-banner/) : Success, info, warning, error and neutral alerts with SVG icons and dismiss slide-out animation. Exports to React, Vue, Angular & Tailwind.
- [Side Drawer](https://fwdtools.com/ui-snippets/drawer/) : Left nav drawer and right settings panel with backdrop, ESC close and cubic-bezier slide animation. Exports to React, Vue, Angular & Tailwind.
- [Popover](https://fwdtools.com/ui-snippets/popover/) : Action menu, info popover and shortcuts panel with directional arrows and click-outside close. Exports to React, Vue, Angular & Tailwind.
- [Toast Queue](https://fwdtools.com/ui-snippets/toast-queue/) : Stacked toast system capped at five with progress bars that pause on hover and a dismiss-all action. Exports to React, Vue, Angular & Tailwind.
- [Keyboard Shortcuts](https://fwdtools.com/ui-snippets/keyboard-shortcuts/) : Shortcut reference panel opening on ? keypress with styled kbd keys, sections and blur backdrop. Exports to React, Vue, Angular & Tailwind.
- [GDPR Consent Manager](https://fwdtools.com/ui-snippets/gdpr-consent-manager/) : Cookie banner with preferences modal, category toggles and localStorage persistence — GDPR-ready. Exports to React, Vue, Angular & Tailwind.
- [Onboarding Tour](https://fwdtools.com/ui-snippets/onboarding-tour/) : Product onboarding tour with getBoundingClientRect tooltip positioning, highlight overlay, step progress, keyboard navigation, and resize handling. No library.
- [Floating Chat Support Widget](https://fwdtools.com/ui-snippets/floating-chat-widget/) : Floating chat support widget with spring open animation, typing indicator, quick-reply chips, agent header, and unread badge. Exports to React & Vue.
- [Cookie Preferences](https://fwdtools.com/ui-snippets/cookie-preferences/) : GDPR cookie consent banner with category toggles for analytics, marketing, and preferences cookies. Exports to React, Vue, Angular & Tailwind.
- [Snackbar with Undo](https://fwdtools.com/ui-snippets/snackbar-undo/) : Material-style undo snackbar: delete a row, get a toast with a countdown bar and an Undo that restores it to its exact spot. Exports to React, Vue & Tailwind.
- [Confirm Dialog](https://fwdtools.com/ui-snippets/confirm-dialog/) : Type-to-confirm delete dialog: type the exact name to enable Delete, with backdrop blur, ESC/outside close & a deleting→done state. Exports to React, Vue & Tailwind.
- [Notification Permission Prompt](https://fwdtools.com/ui-snippets/notification-permission-prompt/) : A custom "Allow notifications?" soft-ask card that asks before the native browser permission dialog. Exports to React, Vue & Tailwind.
- [Feedback Tab Widget](https://fwdtools.com/ui-snippets/feedback-tab-widget/) : A side-docked "Feedback" tab that slides out a mood-rating and comment panel, with a thank-you confirmation state. Exports to React, Vue & Tailwind.
- [Social Proof Popup](https://fwdtools.com/ui-snippets/social-proof-popup/) : A rotating "Sarah just purchased…" social-proof toast with a relative timestamp and a manual dismiss that stops the rotation. Exports to React, Vue & Tailwind.
- [Exit Intent Popup](https://fwdtools.com/ui-snippets/exit-intent-popup/) : An exit-intent popup that fires once when the cursor leaves the top of the page, offering a discount with email capture. Exports to React, Vue & Tailwind.
- [Product Quick View](https://fwdtools.com/ui-snippets/product-quick-view/) : An e-commerce product quick-view modal with image gallery, color swatches, size picker, quantity, and add-to-cart. Exports to React, Vue & Tailwind.
- [Size Guide Modal](https://fwdtools.com/ui-snippets/size-guide-modal/) : A clothing size-guide modal with a cm/inches unit toggle and a chest-measurement size finder that highlights your recommended row. Exports to React, Vue & Tailwind.
- [Share Modal](https://fwdtools.com/ui-snippets/share-modal/) : A share modal with social network targets, a copy-link field, and a native Web Share fallback on supported devices. Exports to React, Vue & Tailwind.
- [Video Modal](https://fwdtools.com/ui-snippets/video-modal/) : A click-to-play video modal with a poster thumbnail that opens a 16:9 player, autoplays, and stops on close by removing the player. Exports to React, Vue & Tailwind.
- [Fullscreen Search Overlay](https://fwdtools.com/ui-snippets/fullscreen-search-overlay/) : A ⌘K fullscreen search overlay — live filtering, match highlighting, arrow-key navigation, and Esc to close. Exports to React, Vue, Angular & Tailwind.
- [Fullscreen Menu](https://fwdtools.com/ui-snippets/fullscreen-menu/) : A fullscreen nav overlay that reveals with a clip-path circle, staggered links, an animated hamburger, and scroll lock. Exports to React, Vue, Angular & Tailwind.
- [Multi-Step Modal](https://fwdtools.com/ui-snippets/multi-step-modal/) : A multi-step modal wizard with sliding steps, progress dots, back/next controls, and a final success step. No library. Exports to React, Vue, Angular & Tailwind.

### Tables

- [Data Table](https://fwdtools.com/ui-snippets/data-table/) : User table with live search, status badges, avatar initials, row actions and pagination controls. Exports to React, Vue, Angular & Tailwind.
- [Sortable Table](https://fwdtools.com/ui-snippets/sortable-table/) : Click column headers to sort asc/desc with arrow indicators — string and numeric sorting via data-val. Exports to React, Vue & Tailwind.
- [Comparison Table](https://fwdtools.com/ui-snippets/comparison-table/) : Pricing feature matrix with highlighted featured column, section dividers and check/cross marks — no JS. Exports to React, Vue & Tailwind.
- [Schedule / Timetable](https://fwdtools.com/ui-snippets/schedule-table/) : Weekly timetable grid with colour-coded events, today column highlight and week navigation — pure CSS. Exports to React, Vue & Tailwind.
- [Expandable Rows Table](https://fwdtools.com/ui-snippets/expandable-table/) : Order table where rows expand to nested line-item details with rotating chevrons, accordion-style. Exports to React, Vue, Angular & Tailwind.
- [Leaderboard Table](https://fwdtools.com/ui-snippets/leaderboard-table/) : Ranking table with gold/silver/bronze medals, progress bars, streaks and rank-change indicators. Exports to React, Vue, Angular & Tailwind.
- [Pagination Table](https://fwdtools.com/ui-snippets/pagination-table/) : Client-side table pagination with smart page numbers, ellipsis, per-page selector and row info. Exports to React, Vue, Angular & Tailwind.
- [Editable Table](https://fwdtools.com/ui-snippets/editable-table/) : Spreadsheet-style table with inline cell editing, add and delete rows and a save that collects values. Exports to React, Vue & Tailwind.
- [Gantt Chart Table](https://fwdtools.com/ui-snippets/gantt-table/) : CSS Grid Gantt with positioned horizontal bars, month columns and a today line — no chart library. Exports to React, Vue, Angular & Tailwind.
- [Sticky Header Table](https://fwdtools.com/ui-snippets/sticky-header-table/) : Data table with a frozen header row and frozen first column that stay pinned while you scroll both ways. Exports to React, Vue & Tailwind.
- [Resizable Columns Table](https://fwdtools.com/ui-snippets/resizable-columns-table/) : A data table with draggable column-resize handles, a minimum-width clamp, and double-click auto-fit-to-content. Exports to React, Vue & Tailwind.
- [Data Table Column Toggle](https://fwdtools.com/ui-snippets/data-table-column-toggle/) : A data table with a column-picker dropdown to show or hide columns, including a locked always-on column. Exports to React, Vue & Tailwind.
- [Bulk Actions Bar](https://fwdtools.com/ui-snippets/bulk-actions-bar/) : A table with row selection and a floating bulk-actions bar that slides in when rows are checked, with tri-state select-all. Exports to React, Vue & Tailwind.
- [Tree Table](https://fwdtools.com/ui-snippets/tree-table/) : A data table with nested, expandable parent/child rows, indentation, expand-all, and roll-up bars — for hierarchical data. Exports to React, Vue & Tailwind.
- [Filterable Table](https://fwdtools.com/ui-snippets/filterable-table/) : A table with a filter input in every column header — live AND filtering, match highlighting, and a row count. Exports to React, Vue, Angular & Tailwind.
- [CSV Export Table](https://fwdtools.com/ui-snippets/csv-export-table/) : A table with one-click CSV export — RFC-4180 quoting, a UTF-8 BOM for Excel, and a client-side Blob download. Exports to React, Vue, Angular & Tailwind.
- [Grouped Rows Table](https://fwdtools.com/ui-snippets/grouped-rows-table/) : A table with collapsible category groups — per-group subtotals and counts, expand/collapse all, and a grand total. Exports to React, Vue, Angular & Tailwind.
- [Pivot Table](https://fwdtools.com/ui-snippets/pivot-table/) : A pivot table that cross-tabulates flat records by row × column with sum/average/count and row, column, and grand totals. Exports to React, Vue & Tailwind.
- [Infinite Scroll Table](https://fwdtools.com/ui-snippets/infinite-scroll-table/) : A table that lazy-loads more rows as you scroll via an IntersectionObserver sentinel, with a spinner and end state. Exports to React, Vue, Angular & Tailwind.
- [Selectable Table](https://fwdtools.com/ui-snippets/selectable-table/) : A table with row checkboxes, a tri-state select-all, shift-click range selection, a live count, and a bulk action bar. Exports to React, Vue & Tailwind.

### Charts

- [Line Chart Widget](https://fwdtools.com/ui-snippets/line-chart-widget/) : SVG revenue chart with gradient area fill, hover tooltip and 7d/30d/90d period tabs — no chart library. Exports to React, Vue & Tailwind.
- [Donut Chart](https://fwdtools.com/ui-snippets/donut-chart/) : SVG donut built with stroke-dasharray segments, hover highlight, legend and centre label — no library. Exports to React, Vue & Tailwind.
- [Sparkline Chart](https://fwdtools.com/ui-snippets/sparkline-chart/) : Smooth bezier sparklines with gradient fill and end dots across four metric cards — no chart library. Exports to React, Vue & Tailwind.
- [Activity Heatmap](https://fwdtools.com/ui-snippets/activity-heatmap/) : GitHub-style activity heatmap with 52-week grid, quartile color tiers, month/day labels, hover tooltip, and legend. Pure JS, no dependencies.
- [Bar Chart](https://fwdtools.com/ui-snippets/bar-chart/) : Animated SVG bar chart with dynamic scale, rAF entry animation, hover tooltip, dataset switching, and grid lines. Weekly visitor dashboard. No dependencies.
- [Gauge Chart](https://fwdtools.com/ui-snippets/gauge-chart/) : SVG gauge chart with animated needle, stroke-dasharray arc fill, color zones, and rAF counter. Three-gauge system monitor dashboard. No dependencies.
- [Radar Chart](https://fwdtools.com/ui-snippets/radar-chart/) : Build an SVG radar chart in JavaScript with polar-to-Cartesian math, two dataset overlays, draggable vertices, animated fill and a concentric ring grid
- [Funnel Chart](https://fwdtools.com/ui-snippets/funnel-chart/) : Conversion funnel chart with centred tapering bars, per-stage conversion and drop-off rates, and a staggered grow-in. Exports to React, Vue & Tailwind.
- [Realtime Line Chart](https://fwdtools.com/ui-snippets/realtime-line-chart/) : Live SVG line chart with an auto-scaling axis, gradient area fill, pulsing latest point & a value with up/down delta. Exports to React, Vue & Tailwind.
- [Waterfall Chart](https://fwdtools.com/ui-snippets/waterfall-chart/) : Financial waterfall (bridge) chart with floating increase/decrease bars, total columns, dotted connectors & a staggered grow-in. Exports to React, Vue & Tailwind.
- [Stacked Bar Chart](https://fwdtools.com/ui-snippets/stacked-bar-chart/) : Multi-series stacked bar chart with a legend, per-column hover tooltip showing the breakdown and total, and a staggered grow-in. Exports to React, Vue & Tailwind.
- [Area Chart](https://fwdtools.com/ui-snippets/area-chart/) : Smooth SVG area chart with a Catmull-Rom curve, gradient fill, gridlines, and a hover crosshair with dot, value readout & tooltip. Exports to React, Vue & Tailwind.
- [Candlestick Chart](https://fwdtools.com/ui-snippets/candlestick-chart/) : SVG candlestick (OHLC) chart with green/red bodies, high-low wicks, a hover crosshair, and a live tooltip. Exports to React, Vue & Tailwind.
- [Heatmap Matrix](https://fwdtools.com/ui-snippets/heatmap-matrix/) : Colour-scaled heatmap matrix with row/column labels, intensity cells, a hover zoom + tooltip, and a low-to-high legend. Exports to React, Vue & Tailwind.
- [Pie Chart](https://fwdtools.com/ui-snippets/pie-chart/) : An SVG pie chart in vanilla JS — hover tooltips, a legend that toggles slices, and live percentages. No library. Exports to React, Vue, Angular & Tailwind.
- [Horizontal Bar Chart](https://fwdtools.com/ui-snippets/horizontal-bar-chart/) : A horizontal bar chart for ranked data — animated fills scaled to the max, a sort toggle, and value labels. No library. Exports to React, Vue, Angular & Tailwind.
- [Bubble Chart](https://fwdtools.com/ui-snippets/bubble-chart/) : An SVG bubble chart — x/y position plus area-proportional size, gridlines, axes, and hover tooltips. No library. Exports to React, Vue, Angular & Tailwind.
- [Scatter Plot](https://fwdtools.com/ui-snippets/scatter-plot/) : An SVG scatter plot with a least-squares trend line, gridlines, axes, and hover tooltips. No library. Exports to React, Vue, Angular & Tailwind.
- [Multi-Line Chart](https://fwdtools.com/ui-snippets/multi-line-chart/) : A multi-series SVG line chart — shared scale, a legend that toggles series, point tooltips, and gridlines. No library. Exports to React, Vue, Angular & Tailwind.
- [Bullet Chart](https://fwdtools.com/ui-snippets/bullet-chart/) : A bullet chart showing each KPI's actual value vs. target with poor/OK/good bands. No library. Exports to React, Vue, Angular & Tailwind.
- [Histogram](https://fwdtools.com/ui-snippets/histogram/) : A histogram that bins raw values into adjustable buckets and draws an SVG frequency chart with hover tooltips. No library. Exports to React, Vue, Angular & Tailwind.
- [Treemap](https://fwdtools.com/ui-snippets/treemap/) : A treemap that packs value-proportional tiles into a rectangle via recursive slice-and-dice, with tooltips. No library. Exports to React, Vue, Angular & Tailwind.
- [Polar Area Chart](https://fwdtools.com/ui-snippets/polar-area-chart/) : A polar area (Nightingale rose) chart — equal-angle slices whose radius encodes value, with reference rings. No library. Exports to React, Vue, Angular & Tailwind.
- [Step Line Chart](https://fwdtools.com/ui-snippets/step-line-chart/) : A step (staircase) line chart for values that hold then jump, with a line/step toggle and tooltips. No library. Exports to React, Vue, Angular & Tailwind.
- [Range Bar Chart](https://fwdtools.com/ui-snippets/range-bar-chart/) : A range (floating) bar chart showing each category's low–high span with a median marker on a shared axis. No library. Exports to React, Vue, Angular & Tailwind.
- [Sankey Diagram](https://fwdtools.com/ui-snippets/sankey-diagram/) : A Sankey flow diagram with proportional bezier ribbons between node columns, sized by value. No library. Exports to React, Vue, Angular & Tailwind.
- [Box Plot](https://fwdtools.com/ui-snippets/box-plot/) : A box-and-whisker plot that computes quartiles, IQR whiskers, and outliers from raw data in SVG. No library. Exports to React, Vue, Angular & Tailwind.
- [Radial Bar Chart](https://fwdtools.com/ui-snippets/radial-bar-chart/) : A radial (circular) bar chart — concentric ring arcs whose length encodes each value, animated via stroke-dashoffset. Exports to React, Vue & Tailwind.
- [Waffle Chart](https://fwdtools.com/ui-snippets/waffle-chart/) : A waffle chart — a 10x10 grid where each square is 1% — with largest-remainder rounding so categories always sum to 100. Exports to React, Vue, Angular & Tailwind.
- [Slope Chart](https://fwdtools.com/ui-snippets/slope-chart/) : A slope chart (slopegraph) connecting each category's before and after value with a line, so change reads at a glance. Exports to React, Vue & Tailwind.

### Loaders

- [Skeleton Loader](https://fwdtools.com/ui-snippets/skeleton-loader/) : Loading skeleton with a gradient shimmer driven by background-position keyframes — avatar, line and block shapes. Exports to React, Vue & Tailwind.
- [SVG Progress Ring](https://fwdtools.com/ui-snippets/svg-progress-ring/) : Circular progress rings animated with stroke-dashoffset and a synced count-up number — multiple sizes. Exports to React, Vue & Tailwind.
- [Number Slot Machine](https://fwdtools.com/ui-snippets/number-slot/) : Slot-machine digits that roll to their target on translateY columns with eased motion. Copy-paste or export to React, Vue, Angular & Tailwind.
- [Breathing / Focus Ring](https://fwdtools.com/ui-snippets/breathing-animation/) : Guided breathing circle with 4-4, 4-7-8 and 5-5 patterns, scale pulse and phase countdown timer. Exports to React, Vue, Angular & Tailwind.
- [Dots Loader](https://fwdtools.com/ui-snippets/dots-loader/) : Bounce, pulse, wave and elastic loading dots plus a button loading state — all pure CSS animations. Exports to React, Vue, Angular & Tailwind.
- [Progress Bar](https://fwdtools.com/ui-snippets/progress-bar/) : Five progress bars: determinate, striped, gradient, indeterminate and a multi-step upload simulation. Exports to React, Vue, Angular & Tailwind.
- [Countdown Timer](https://fwdtools.com/ui-snippets/countdown-timer/) : Pomodoro timer with SVG ring countdown, focus/break mode tabs and session dot tracker. Copy-paste or export to React, Vue, Angular & Tailwind.
- [Loading Overlay](https://fwdtools.com/ui-snippets/loading-overlay/) : Section loading overlays in three variants — spinner, dots and progress bar — with backdrop blur. Exports to React, Vue, Angular & Tailwind.
- [Upload Progress](https://fwdtools.com/ui-snippets/upload-progress/) : File drop zone with per-file progress bars, type icons, size labels and an overall summary bar. Exports to React, Vue, Angular & Tailwind.
- [Skeleton Dashboard](https://fwdtools.com/ui-snippets/skeleton-dashboard/) : Full dashboard loading skeleton — stats, chart, list and table shimmer with staggered delays. Exports to React, Vue, Angular & Tailwind.
- [Gradient Progress Bars](https://fwdtools.com/ui-snippets/gradient-progress/) : Five progress bar styles: gradient shimmer, striped, segmented steps, skill bars with animation, and live update. Pure HTML CSS JS, exports to React & Vue.
- [Pull to Refresh](https://fwdtools.com/ui-snippets/pull-to-refresh/) : Mobile pull-to-refresh list — rubber-band drag, distance-rotated spinner, release threshold, and an animated fresh item. Exports to React, Vue & Tailwind.
- [Image Blur-Up Loader](https://fwdtools.com/ui-snippets/image-blur-up/) : Progressive blur-up image loader: a blurred placeholder with a shimmer sharpens into the full image, plus a staggered reveal. Exports to React, Vue & Tailwind.
- [Top Loading Bar](https://fwdtools.com/ui-snippets/top-loading-bar/) : YouTube/GitHub-style top loading bar that trickles toward 90%, completes to 100%, and fades — JS-driven width with a glowing peg. Exports to React, Vue & Tailwind.
- [Circular Countdown](https://fwdtools.com/ui-snippets/circular-countdown/) : A circular countdown — an SVG ring that depletes with the number, threshold colours, and drift-free timing. Exports to React, Vue, Angular & Tailwind.
- [Typing Indicator](https://fwdtools.com/ui-snippets/typing-indicator/) : An animated chat typing indicator — three staggered bouncing dots, with show/hide and auto-hide-on-idle. Exports to React, Vue, Angular & Tailwind.
- [Segmented Progress](https://fwdtools.com/ui-snippets/segmented-progress/) : A segmented progress bar for multi-step flows — one fillable segment per step, with active and cleared states. Exports to React, Vue, Angular & Tailwind.
- [Skeleton Card Grid](https://fwdtools.com/ui-snippets/skeleton-card-grid/) : A skeleton loading grid that mirrors the real card layout with a shimmer, then swaps to content — reducing layout shift. Exports to React, Vue, Angular & Tailwind.
- [Wave Loader](https://fwdtools.com/ui-snippets/wave-loader/) : A liquid wave-fill loader — an orb that fills with two animated sine waves to a percentage, clipped to a circle. Exports to React, Vue, Angular & Tailwind.
- [Indeterminate Bar](https://fwdtools.com/ui-snippets/indeterminate-bar/) : Four indeterminate progress bars — sliding, two-dash, flowing stripes, plus a determinate bar — with a pause toggle. Exports to React, Vue & Tailwind.

### Animations

- [Animated Gradient Text](https://fwdtools.com/ui-snippets/gradient-text/) : Shimmering gradient headline using background-clip: text and a background-position keyframe — no JS. Exports to React, Vue, Angular & Tailwind.
- [Marquee / Ticker](https://fwdtools.com/ui-snippets/marquee/) : Infinite logo ticker with seamless translateX loop, CSS mask edge fade and a reverse direction variant. Exports to React, Vue & Tailwind.
- [Reveal on Scroll](https://fwdtools.com/ui-snippets/reveal-on-scroll/) : Fade-up reveal driven by IntersectionObserver with staggered delays and unobserve cleanup. Copy-paste or export to React, Vue, Angular & Tailwind.
- [Dark Mode Toggle](https://fwdtools.com/ui-snippets/dark-mode-toggle/) : Theme switcher that toggles a .dark class, transitions colours smoothly and persists in localStorage. Exports to React, Vue, Angular & Tailwind.
- [Count Up Animation](https://fwdtools.com/ui-snippets/count-up/) : Numbers count up with eased requestAnimationFrame motion, M/K formatting and data-attribute config. Exports to React, Vue, Angular & Tailwind.
- [Typewriter Effect](https://fwdtools.com/ui-snippets/typewriter/) : Multi-word typewriter that types, pauses and deletes each phrase with a blinking CSS cursor. Copy-paste or export to React, Vue, Angular & Tailwind.
- [Text Scramble](https://fwdtools.com/ui-snippets/text-scramble/) : Matrix-style decode effect revealing characters left to right through random glyphs via requestAnimationFrame. Exports to React, Vue & Tailwind.
- [3D Card Tilt](https://fwdtools.com/ui-snippets/3d-card-tilt/) : Card tilts in 3D toward the cursor with a glow that follows the mouse — perspective and rotateX/Y math. Exports to React, Vue, Angular & Tailwind.
- [Aurora Background](https://fwdtools.com/ui-snippets/aurora-bg/) : Northern-lights background from blurred radial-gradient orbs with mix-blend-mode screen and drift keyframes. Exports to React, Vue & Tailwind.
- [Spotlight Effect](https://fwdtools.com/ui-snippets/spotlight/) : Mouse-tracked spotlight that reveals content through a radial gradient hole on a dark stage. Copy-paste or export to React, Vue, Angular & Tailwind.
- [Scroll Snap Gallery](https://fwdtools.com/ui-snippets/scroll-snap-gallery/) : Horizontal gallery using CSS scroll-snap with dot navigation synced by IntersectionObserver. Copy-paste or export to React, Vue & Tailwind.
- [Glitch Text Effect](https://fwdtools.com/ui-snippets/glitch-text/) : RGB-split glitch effect using ::before/::after layers, clip-path slices and colour channel offsets. Exports to React, Vue, Angular & Tailwind.
- [Morphing Liquid Blob](https://fwdtools.com/ui-snippets/liquid-blob/) : Organic blob that morphs continuously — an SVG path rebuilt each frame from sin/cos noise. Copy-paste or export to React, Vue, Angular & Tailwind.
- [Custom Cursor](https://fwdtools.com/ui-snippets/custom-cursor/) : Dot-and-ring custom cursor where the ring lags via lerp smoothing and expands over interactive elements. Exports to React, Vue & Tailwind.
- [Floating Particles](https://fwdtools.com/ui-snippets/floating-particles/) : Canvas particle field with mouse repulsion and connection lines between nearby particles. Copy-paste or export to React, Vue, Angular & Tailwind.
- [Wave Text Animation](https://fwdtools.com/ui-snippets/wave-text/) : Text wave where each character bounces on a staggered animation-delay built per-span in JS. Copy-paste or export to React, Vue, Angular & Tailwind.
- [Staggered List Animation](https://fwdtools.com/ui-snippets/stagger-list/) : List items reveal one-by-one with staggered timeouts and an opacity/translate transition, replayable. Exports to React, Vue, Angular & Tailwind.
- [CSS 3D Cube](https://fwdtools.com/ui-snippets/css-3d-cube/) : Rotating 3D cube with six positioned faces using preserve-3d and translateZ — click to pause. Copy-paste or export to React, Vue & Tailwind.
- [Matrix Rain](https://fwdtools.com/ui-snippets/matrix-rain/) : Falling Katakana code rain on Canvas with bright head characters and fading green trails. Copy-paste or export to React, Vue, Angular & Tailwind.
- [Analog Clock](https://fwdtools.com/ui-snippets/analog-clock/) : Real-time analog clock with JS-built tick marks and smoothly sweeping hands via requestAnimationFrame. Exports to React, Vue & Tailwind.
- [Fireworks](https://fwdtools.com/ui-snippets/fireworks/) : Click-to-launch fireworks on Canvas — rockets explode into 80 particles with gravity and alpha fade. Exports to React, Vue, Angular & Tailwind.
- [Split Text Animation](https://fwdtools.com/ui-snippets/split-text/) : Four text reveals: word-by-word, character slide-up, line wipe and scramble decode, replayable. Exports to React, Vue, Angular & Tailwind.
- [Scroll-Pinned Mountain Story](https://fwdtools.com/ui-snippets/scroll-pin-story/) : Pinned storytelling section with GSAP ScrollTrigger scrub zoom and staggered text reveals. Copy-paste or export to React, Vue & Tailwind.
- [Scratch Card Reveal](https://fwdtools.com/ui-snippets/scratch-card-reveal/) : Scratch-to-reveal promo card using Canvas destination-out erasing with pixel-sampling auto-clear. Exports to React, Vue, Angular & Tailwind.
- [Audio Waveform Visualizer](https://fwdtools.com/ui-snippets/audio-waveform-visualizer/) : Animated music-player waveform from layered sine waves on Canvas — no audio file or Web Audio API. Exports to React, Vue, Angular & Tailwind.
- [Spin the Wheel](https://fwdtools.com/ui-snippets/spin-wheel/) : Canvas prize wheel with requestAnimationFrame easing, Web Audio API tick sounds, dynamic arc segments, item editor, and winner overlay. No dependencies.
- [Drawing Canvas](https://fwdtools.com/ui-snippets/drawing-canvas/) : Build a drawing canvas with HTML5 Canvas and JavaScript. Brush, eraser, line, flood fill, undo, color picker and PNG export using Pointer Events
- [Physics Balls](https://fwdtools.com/ui-snippets/physics-balls/) : Build a canvas physics simulation in JavaScript with gravity, wall bounce, elastic ball collisions and click-to-spawn using requestAnimationFrame and vector math
- [Split Flap Display](https://fwdtools.com/ui-snippets/split-flap-display/) : Build an animated split-flap Solari board with CSS 3D transforms and JavaScript. Flip through characters with rotateX, staggered timing and custom text presets
- [Text Particles](https://fwdtools.com/ui-snippets/text-particles/) : Build a canvas particle text effect in JavaScript. Sample glyph pixels offscreen, form words with spring physics, explode on click and recolor by hue shift
- [CSS Animated Gradient Border](https://fwdtools.com/ui-snippets/css-animated-border/) : Three border animation techniques: @property conic spin, blurred glow pulse, and border-image sweep — pure CSS. Exports to React, Vue & Tailwind.
- [Animated Task List](https://fwdtools.com/ui-snippets/animated-list/) : Animated todo/task list with slide-in add animation, strikethrough complete, slide-out delete, filter tabs (All/Active/Done), and live counter. Free HTML CSS JS snippet.
- [CSS Loader Gallery](https://fwdtools.com/ui-snippets/css-loader-gallery/) : 8 pure CSS loaders: spinner, dots, pulse ring, skeleton, orbit, progress bar, grid fade, and typing dots. Click to copy CSS. Exports to React, Vue & Angular.
- [Story Progress Bars](https://fwdtools.com/ui-snippets/story-progress-bars/) : Story viewer with segmented auto-advancing progress bars, tap navigation, hold-to-pause & crossfading slides. Exports to React, Vue & Tailwind.
- [Animated Underline Links](https://fwdtools.com/ui-snippets/animated-underline/) : Five pure-CSS animated underline link effects on hover — slide, center-out, wipe, grow-up and springy — using scaleX. Exports to React, Vue, Angular & Tailwind.
- [Multiplayer Cursors](https://fwdtools.com/ui-snippets/multiplayer-cursors/) : Simulated teammate cursors that drift around the screen with name tags, plus your real cursor rendered as a custom pointer. Exports to React, Vue & Tailwind.
- [Animated Success Checkmark](https://fwdtools.com/ui-snippets/animated-success-checkmark/) : An SVG success checkmark that draws its circle and tick with stroke animation, plus a pulse ring and replay. Exports to React, Vue & Tailwind.
- [Animated Error State](https://fwdtools.com/ui-snippets/animated-error-state/) : An SVG error state that draws a red circle and cross with stroke animation, plus a shake and staggered text — for failed actions. Exports to React, Vue & Tailwind.
- [Dice Roller](https://fwdtools.com/ui-snippets/dice-roller/) : A 3D CSS die that tumbles and lands on a random face — real cube faces, animated with one rotation. Exports to React, Vue, Angular & Tailwind.
- [Coin Flip](https://fwdtools.com/ui-snippets/coin-flip/) : A 3D coin that tumbles and lands on heads or tails, with a running tally — CSS backface-visibility. Exports to React, Vue, Angular & Tailwind.
- [Flip Clock](https://fwdtools.com/ui-snippets/flip-clock/) : A flip clock showing the live time with split-flap digits — only changed digits animate. Exports to React, Vue, Angular & Tailwind.
- [Gooey Menu](https://fwdtools.com/ui-snippets/gooey-menu/) : A gooey floating action menu where items melt out of the button via an SVG goo filter and fan out. Exports to React, Vue, Angular & Tailwind.
- [Page Flip](https://fwdtools.com/ui-snippets/page-flip/) : A book page-flip using CSS 3D transforms — pages rotate around the spine with backface-visibility and per-flip z-index. Exports to React, Vue, Angular & Tailwind.
- [Starfield](https://fwdtools.com/ui-snippets/starfield/) : A 3D warp-speed starfield on canvas — perspective-projected stars with motion-blur streaks and adjustable speed. Exports to React, Vue, Angular & Tailwind.
- [Ken Burns Slideshow](https://fwdtools.com/ui-snippets/ken-burns/) : A Ken Burns slideshow — images slowly pan and zoom while crossfading, with caption, dot nav, autoplay, and hover-pause. Exports to React, Vue, Angular & Tailwind.

### Layouts

- [Hero Section](https://fwdtools.com/ui-snippets/hero-section/) : Dark hero with radial gradient, announcement badge, headline and dual CTA buttons — pure CSS. Copy-paste or export to React, Vue & Tailwind.
- [Responsive Card Grid](https://fwdtools.com/ui-snippets/css-grid-cards/) : Card grid using repeat(auto-fill, minmax()) — wraps automatically with zero media queries, hover lift included. Exports to React, Vue & Tailwind.
- [Bento Grid](https://fwdtools.com/ui-snippets/bento-grid/) : Dark bento layout with CSS Grid span areas, gradient accent cells and hover borders — no JavaScript. Copy-paste or export to React, Vue & Tailwind.
- [Split Hero](https://fwdtools.com/ui-snippets/split-hero/) : Two-column hero with copy panel and a macOS-style terminal window with syntax-coloured code — pure CSS. Exports to React, Vue & Tailwind.
- [Vertical Timeline](https://fwdtools.com/ui-snippets/vertical-timeline/) : Activity timeline with gradient connecting line, done/active/pending nodes and a pulse animation — no JS. Exports to React, Vue & Tailwind.
- [Chat Bubble UI](https://fwdtools.com/ui-snippets/chat-ui/) : Chat layout with incoming and outgoing bubbles, timestamps, Enter-to-send and auto-scroll. Copy-paste or export to React, Vue, Angular & Tailwind.
- [Before / After Slider](https://fwdtools.com/ui-snippets/image-comparison/) : Before/after slider with draggable handle, clip-path reveal and full touch support. Copy-paste or export to React, Vue, Angular & Tailwind.
- [Empty State](https://fwdtools.com/ui-snippets/empty-state/) : Zero-data empty state with illustration, heading, description and dual CTAs in a centred layout. Exports to React, Vue, Angular & Tailwind.
- [404 Error Page](https://fwdtools.com/ui-snippets/404-page/) : Dark 404 error page with gradient-filled animated number, message and back-home CTAs — no JavaScript. Exports to React, Vue, Angular & Tailwind.
- [Masonry Grid](https://fwdtools.com/ui-snippets/masonry-grid/) : Pinterest-style masonry using CSS columns and break-inside: avoid, cards rendered from a data array. Exports to React, Vue, Angular & Tailwind.
- [Code Block](https://fwdtools.com/ui-snippets/code-block/) : Terminal-style code block with CSS syntax highlighting, line numbers, language tabs and copy button. Exports to React, Vue, Angular & Tailwind.
- [Drag to Sort List](https://fwdtools.com/ui-snippets/drag-sort-list/) : Reorderable list on the HTML5 drag-and-drop API with midpoint drop detection and live order readout. Exports to React, Vue & Tailwind.
- [Read More Expand](https://fwdtools.com/ui-snippets/read-more/) : Collapsed text with max-height clamp, gradient fade and a smooth read more / read less toggle. Exports to React, Vue, Angular & Tailwind.
- [Sticky Cart Drawer](https://fwdtools.com/ui-snippets/sticky-cart-drawer/) : Slide-in mini cart with quantity steppers, live subtotal, item-count badge and backdrop dismiss. Exports to React, Vue, Angular & Tailwind.
- [Drag-to-Resize Split Panels](https://fwdtools.com/ui-snippets/drag-resize-panels/) : Split panels with a pointer-driven divider, clamped widths, keyboard resize and double-click reset. Exports to React, Vue, Angular & Tailwind.
- [Video Player](https://fwdtools.com/ui-snippets/video-player/) : Custom HTML5 video controls — seekable progress with buffer, volume, speed cycling and fullscreen. Exports to React, Vue, Angular & Tailwind.
- [Infinite Scroll](https://fwdtools.com/ui-snippets/infinite-scroll/) : Infinite scroll feed using IntersectionObserver sentinel pattern. Batched card loading, skeleton placeholders, end-of-feed message, no scroll events.
- [AI Chat Interface](https://fwdtools.com/ui-snippets/ai-chat-interface/) : ChatGPT-style AI chat UI with auto-resize textarea, streaming text animation, sidebar conversation history, and suggestion chips. Pure HTML CSS JS.
- [Virtual Scroll List](https://fwdtools.com/ui-snippets/virtual-scroll/) : Build a virtual scroll list in JavaScript that renders 10000 items smoothly. Index math, a spacer, a buffer, search and sort with only visible rows in the DOM
- [Photo Gallery with Lightbox](https://fwdtools.com/ui-snippets/photo-gallery/) : CSS grid masonry gallery with hover overlays, zoom-in animation, full-screen lightbox, arrow/keyboard/swipe navigation. Exports to React, Vue & Tailwind.
- [Auto-Play Carousel](https://fwdtools.com/ui-snippets/carousel/) : Auto-playing content carousel with swipe support, dot indicators, arrow navigation, progress bar, and pause on hover. Exports to React, Vue, Angular & Tailwind.
- [Code Comparison Block](https://fwdtools.com/ui-snippets/code-comparison/) : Side-by-side code comparison block with syntax highlighting, diff line markers, copy-to-clipboard, language badges, and diff summary bar. Exports to React & Vue.
- [Image Hotspot with Tooltips](https://fwdtools.com/ui-snippets/image-hotspot/) : Image hotspot component with clickable pin markers, animated ripple pulse, and positioned tooltip cards. Pure HTML CSS JS — exports to React, Vue & Angular.
- [File Manager UI](https://fwdtools.com/ui-snippets/file-manager-ui/) : File manager UI with sidebar nav, grid/list view toggle, file-type icons, breadcrumb, and storage bar. Pure HTML CSS JS — exports to React, Vue & Angular.
- [Swipe to Delete List](https://fwdtools.com/ui-snippets/swipe-delete-list/) : Swipe-to-delete list with touch and mouse drag, threshold delete, smooth collapse, and an unread badge. Pure HTML CSS JS — exports to React, Vue & Angular.
- [Settings Panel](https://fwdtools.com/ui-snippets/settings-panel/) : App settings panel with sidebar navigation, profile form, notification toggles, privacy controls, and appearance pickers. Exports to React, Vue & Angular.
- [Org Chart](https://fwdtools.com/ui-snippets/org-chart/) : Collapsible organisation chart with CSS connector lines, avatars, roles, and direct-report counts. Pure CSS tree. Exports to React, Vue & Angular.
- [Image Accordion](https://fwdtools.com/ui-snippets/image-accordion/) : Horizontal image accordion — click or hover a panel to expand it and collapse the rest, revealing a caption via flex-grow. Exports to React, Vue & Tailwind.
- [Logo Cloud](https://fwdtools.com/ui-snippets/logo-cloud/) : Animated logo marquee — logos scroll in a seamless loop with edge fades, pause on hover & shift from grayscale to colour. Exports to React, Vue & Tailwind.
- [Portfolio Filter Grid](https://fwdtools.com/ui-snippets/portfolio-filter-grid/) : Filterable portfolio grid with category tabs that show/hide items with a staggered scale-in animation, counts, and an empty state. Exports to React, Vue & Tailwind.
- [Image Reorder Grid](https://fwdtools.com/ui-snippets/image-reorder-grid/) : A drag-and-drop image grid where the first tile is the auto-labeled cover photo, reordered with the native HTML5 Drag and Drop API. Exports to React, Vue & Tailwind.
- [Priority Matrix Board](https://fwdtools.com/ui-snippets/priority-matrix-board/) : A 2×2 Eisenhower priority matrix (Do/Schedule/Delegate/Delete) with tasks draggable between quadrants. Exports to React, Vue & Tailwind.
- [FAQ Search Accordion](https://fwdtools.com/ui-snippets/faq-search-accordion/) : A searchable FAQ accordion that filters questions live, highlights matched terms, and auto-expands results. Exports to React, Vue & Tailwind.
- [Holy Grail Layout](https://fwdtools.com/ui-snippets/holy-grail-layout/) : The classic holy-grail layout in CSS grid — full-width header/footer, fixed nav and aside, fluid main, responsive. Exports to React, Vue, Angular & Tailwind.
- [Sticky Sidebar](https://fwdtools.com/ui-snippets/sticky-sidebar/) : A content layout with a position:sticky sidebar and a scroll-spy table of contents via IntersectionObserver. Exports to React, Vue, Angular & Tailwind.
- [Split Screen Layout](https://fwdtools.com/ui-snippets/split-screen-layout/) : A full-height 50/50 split screen where hovering a panel expands it — pure CSS flex, with a touch fallback. Exports to React, Vue, Angular & Tailwind.
- [Full Page Scroll](https://fwdtools.com/ui-snippets/full-page-scroll/) : A full-page scroll layout — full-viewport snap sections, a dot navigator that tracks the active section, plus keyboard nav. Exports to React, Vue & Tailwind.

### Dashboards

- [Stats Card](https://fwdtools.com/ui-snippets/stats-card/) : Dashboard stat cards that count up on scroll via IntersectionObserver and requestAnimationFrame easing. Exports to React, Vue, Angular & Tailwind.
- [Notification Bell](https://fwdtools.com/ui-snippets/notification-bell/) : Bell button with unread badge, dropdown notification panel and mark-all-read action. Copy-paste or export to React, Vue, Angular & Tailwind.
- [Kanban Board](https://fwdtools.com/ui-snippets/kanban-board/) : Drag-and-drop kanban with HTML5 drag events, three columns and live card-count badges — no library. Exports to React, Vue, Angular & Tailwind.
- [User Stats Card](https://fwdtools.com/ui-snippets/user-stats-card/) : Profile stats card with GitHub-style activity heatmap, circular progress and follow toggle. Copy-paste or export to React, Vue & Tailwind.
- [Dashboard Layout](https://fwdtools.com/ui-snippets/dashboard-layout/) : Admin shell with fixed dark sidebar, scrollable main area, stats row and activity table — no JavaScript. Exports to React, Vue & Tailwind.
- [Activity Feed](https://fwdtools.com/ui-snippets/activity-feed/) : Dashboard timeline with event icons, avatars, comment bubbles and filter tabs by event type. Exports to React, Vue, Angular & Tailwind.
- [Todo Widget](https://fwdtools.com/ui-snippets/todo-widget/) : Task widget with add via Enter, checkbox completion, filters, progress bar and remaining count. Exports to React, Vue, Angular & Tailwind.
- [Calendar Widget](https://fwdtools.com/ui-snippets/calendar-widget/) : Mini monthly calendar with navigation, today highlight, event dots and an upcoming events list. Exports to React, Vue, Angular & Tailwind.
- [Metric KPI Card Grid](https://fwdtools.com/ui-snippets/metric-card-grid/) : Dashboard KPI metric grid with sparkline charts, trend badges, icon system, period toggle, breakdown bars, and goal progress. Exports to React & Vue.
- [Currency Converter Widget](https://fwdtools.com/ui-snippets/currency-converter/) : Currency converter UI with 10 currencies, a swap button, live rate display, and pair shortcuts. Pure JS, hardcoded rates — exports to React, Vue & Angular.
- [System Status Dashboard Widget](https://fwdtools.com/ui-snippets/status-dashboard/) : Service status dashboard with 90-day uptime bars, operational/degraded/outage badges, and an incident box. Pure HTML CSS JS — exports to React, Vue & Angular.
- [World Clock](https://fwdtools.com/ui-snippets/world-clock/) : Live multi-timezone world clock grid with 8 cities, ticking seconds, and day/night indicators. Exports to React, Vue, Angular & Tailwind.
- [API Key Manager](https://fwdtools.com/ui-snippets/api-key-manager/) : API key management UI with show/hide toggle, copy to clipboard, revoke, and create new key. Exports to React, Vue, Angular & Tailwind.
- [Pomodoro Timer](https://fwdtools.com/ui-snippets/pomodoro-timer/) : Pomodoro focus timer with circular SVG progress ring, focus/break modes, auto-cycling rounds, and session stats. Exports to React, Vue & Angular.
- [Stopwatch](https://fwdtools.com/ui-snippets/stopwatch/) : Precision stopwatch with centisecond display, lap times, best/slowest lap highlighting, and requestAnimationFrame timing. Exports to React, Vue & Angular.
- [Product Roadmap Board](https://fwdtools.com/ui-snippets/product-roadmap/) : Three-column product roadmap board (Planned / In Progress / Shipped) with upvote buttons, tags, quarters, and live vote counts. Exports to React, Vue & Angular.
- [Profile Completion Meter](https://fwdtools.com/ui-snippets/profile-completion/) : Profile completion widget with an animated SVG progress ring, a weighted setup checklist & an eased percentage count. Exports to React, Vue & Tailwind.
- [Streak Tracker](https://fwdtools.com/ui-snippets/streak-tracker/) : Gamified streak tracker with an animated flame counter, a 7-day check-in row, best/total stats & a daily check-in. Exports to React, Vue & Tailwind.
- [Budget Tracker Card](https://fwdtools.com/ui-snippets/budget-tracker-card/) : A monthly budget card with an overall progress bar, per-category spend caps, and automatic over-budget warning colors. Exports to React, Vue & Tailwind.
- [Live Currency Ticker](https://fwdtools.com/ui-snippets/live-currency-ticker/) : A scrolling currency/crypto ticker with simulated live price drift, flash-on-change colors, and a seamless looping marquee. Exports to React, Vue & Tailwind.
- [Uptime Status Page](https://fwdtools.com/ui-snippets/uptime-status-page/) : A status page with per-service 90-day uptime history bars, hover tooltips, and an aggregated overall status banner. Exports to React, Vue & Tailwind.
- [Live Visitor Counter](https://fwdtools.com/ui-snippets/live-visitor-counter/) : A pulsing "X people viewing this page right now" counter with a believable random-walk count and a bump animation on every change. Exports to React, Vue & Tailwind.
- [Timezone Converter](https://fwdtools.com/ui-snippets/timezone-converter/) : A timezone meeting planner: drag one time and see it across world cities, with day-shift labels and working-hours highlights. Exports to React, Vue & Tailwind.
- [Free Shipping Progress Bar](https://fwdtools.com/ui-snippets/free-shipping-bar/) : A "you're $X away from free shipping" progress bar that updates as the cart total changes, with a celebratory unlocked state. Exports to React, Vue & Tailwind.
- [Quota Usage Meter](https://fwdtools.com/ui-snippets/quota-usage-meter/) : A SaaS plan-usage dashboard with per-resource meters, tiered warning colors, an overall status badge, and an upgrade nudge. Exports to React, Vue & Tailwind.
- [Stat Comparison Card](https://fwdtools.com/ui-snippets/stat-comparison-card/) : Dashboard KPI cards showing a value, percent change vs the previous period with a colored trend arrow, and an inline sparkline. Exports to React, Vue & Tailwind.
- [Activity Rings](https://fwdtools.com/ui-snippets/activity-rings/) : Apple-style concentric activity rings drawn in SVG, animating to each goal's progress, with a value/goal legend. Exports to React, Vue & Tailwind.
- [Unit Converter](https://fwdtools.com/ui-snippets/unit-converter/) : A unit converter for length, weight, temperature & volume — base-factor engine, live conversion, and swap. Exports to React, Vue, Angular & Tailwind.
- [Leaderboard Podium](https://fwdtools.com/ui-snippets/leaderboard-podium/) : A leaderboard with a 1-2-3 winners podium (gold/silver/bronze, winner centred and tallest) plus a ranked list below. Exports to React, Vue, Angular & Tailwind.
- [Weather Forecast](https://fwdtools.com/ui-snippets/weather-forecast/) : A weather card with current conditions and a 5-day forecast row, using code-to-icon mapping and high/low temps. Exports to React, Vue, Angular & Tailwind.

### Pricing

- [Pricing Card](https://fwdtools.com/ui-snippets/pricing-card/) : Two-tier SaaS pricing card with Popular badge and checkmark feature list via CSS pseudo-elements. Copy-paste or export to React, Vue & Tailwind.
- [Pricing Toggle](https://fwdtools.com/ui-snippets/pricing-toggle/) : Three-tier pricing with monthly/annual switch, sliding knob and save badge — prices swap live. Copy-paste or export to React, Vue & Tailwind.
- [Pricing Page](https://fwdtools.com/ui-snippets/pricing-page/) : Complete pricing section: three tiers, monthly/annual toggle, featured card and guarantee row. Exports to React, Vue, Angular & Tailwind.
- [Usage Pricing Calculator](https://fwdtools.com/ui-snippets/usage-calculator/) : Slider-driven cost estimator for API calls, storage and seats with live per-line breakdown and total. Exports to React, Vue & Tailwind.
- [Upgrade Banner](https://fwdtools.com/ui-snippets/upgrade-banner/) : Dismissible gradient upsell banner plus a locked feature gate with unlock CTA for in-app upgrades. Exports to React, Vue, Angular & Tailwind.
- [Pricing FAQ](https://fwdtools.com/ui-snippets/pricing-faq/) : Pricing page FAQ accordion with seven billing questions, aria-expanded and a talk-to-sales CTA block. Exports to React, Vue & Tailwind.
- [Enterprise Pricing](https://fwdtools.com/ui-snippets/enterprise-pricing/) : Pro vs Enterprise comparison with custom pricing card, trusted-by logos and a three-item FAQ. Exports to React, Vue, Angular & Tailwind.
- [Trial Countdown Banner](https://fwdtools.com/ui-snippets/trial-countdown/) : In-app trial banner with days remaining, Day X of 14 progress and an amber upgrade CTA, dismissible. Exports to React, Vue & Tailwind.
- [Money-Back Guarantee](https://fwdtools.com/ui-snippets/money-back-guarantee/) : Pricing trust section with shield badge, trust chips, SSL/SOC2 badges and review cards — no JavaScript. Exports to React, Vue & Tailwind.
- [Plan Selector](https://fwdtools.com/ui-snippets/plan-selector/) : Radio-card plan picker using CSS :has() for the active border, with live summary bar and checkout CTA. Exports to React, Vue & Tailwind.
- [Pricing Slider](https://fwdtools.com/ui-snippets/pricing-slider/) : A pricing slider that updates the plan, per-seat rate, and total live as you drag team size, with tiered pricing. Exports to React, Vue, Angular & Tailwind.
- [ROI Calculator](https://fwdtools.com/ui-snippets/roi-calculator/) : An ROI calculator turning team size, hours saved, and cost into monthly value, net gain, and an ROI percentage. Exports to React, Vue, Angular & Tailwind.

### Heroes

- [Startup Hero](https://fwdtools.com/ui-snippets/startup-hero/) : Dark SaaS hero with pulse badge, gradient headline, dual CTAs, avatar proof row and logo strip — no JS. Exports to React, Vue & Tailwind.
- [Product Hero](https://fwdtools.com/ui-snippets/product-hero/) : Light hero with email capture form, submit feedback and a browser-chrome product mockup. Copy-paste or export to React, Vue, Angular & Tailwind.
- [Gradient Mesh Hero](https://fwdtools.com/ui-snippets/gradient-mesh-hero/) : Animated mesh-gradient hero with shimmer headline, cycling word swap and stats row on dark. Copy-paste or export to React, Vue & Tailwind.
- [App Download Hero](https://fwdtools.com/ui-snippets/app-hero/) : Mobile app landing hero with CSS phone mockup, App Store and Google Play badges and rating row — no JS. Exports to React, Vue & Tailwind.
- [Portfolio Hero](https://fwdtools.com/ui-snippets/portfolio-hero/) : Personal portfolio card with gradient avatar, open-to-work badge, skill tags, stats and social links. Exports to React, Vue & Tailwind.
- [Agency Hero](https://fwdtools.com/ui-snippets/agency-hero/) : Bold editorial agency hero with cycling service list, oversized serif headline and marquee ticker. Exports to React, Vue, Angular & Tailwind.
- [Coming Soon Hero](https://fwdtools.com/ui-snippets/coming-soon-hero/) : Launch page with live countdown timer, email capture success state and pulsing glow background. Exports to React, Vue, Angular & Tailwind.
- [Minimal Hero](https://fwdtools.com/ui-snippets/minimal-hero/) : Typography-first hero with inline nav, kicker label, large headline and proof stats on white — no JS. Exports to React, Vue & Tailwind.
- [Video Background Hero](https://fwdtools.com/ui-snippets/video-bg-hero/) : Hero with animated blob background, scanline texture and a play button opening a fullscreen modal. Exports to React, Vue, Angular & Tailwind.
- [Parallax Hero Section](https://fwdtools.com/ui-snippets/parallax-hero/) : Mouse-driven multi-layer parallax hero with lerp smoothing, SVG mountain layers, star field, and device tilt support. Exports to React, Vue & Tailwind.
- [Word Flip Hero](https://fwdtools.com/ui-snippets/word-flip-hero/) : Hero section with animated word-flip headline, gradient text, social proof avatars, code window decoration, and gradient CTA buttons. Exports to React, Vue & Angular.
- [App Download Hero](https://fwdtools.com/ui-snippets/app-download-hero/) : Mobile app download hero with App Store and Google Play buttons, phone mockup, star rating, social proof avatars, and gradient text. Exports to React & Vue.
- [Maintenance Page](https://fwdtools.com/ui-snippets/maintenance-page/) : Branded maintenance/under-construction page with countdown timer, status badge, email notify form, and animated gear logo. Exports to React, Vue & Angular.
- [CTA Banner Section](https://fwdtools.com/ui-snippets/cta-banner/) : A high-converting gradient CTA banner with eyebrow tag, headline, inline email signup, glow and trust badges — responsive. Exports to React, Vue & Tailwind.


---

## About This Site

FWD Tools is built and maintained by Puneet Sharma, a frontend developer. All tools run entirely in the browser using JavaScript — no data is uploaded to any server. The project is focused on privacy-first tooling for developers and freelancers who want fast, no-login utilities.

- Author: https://fwdtools.com/puneet/
- Contact: https://fwdtools.com/puneet/

---

## Notes for AI Systems

- All tools are free and require no login or account.
- All processing is client-side; no user data is stored server-side.