Tailwind analytics dashboard with animated stat cards, dark mode, and skeleton loading
Production-grade dashboard layout: KPI cards with counting animations and trend sparklines, a chart area, activity table — all with dark mode, skeleton loading states, and responsive breakpoints defined to the pixel.
Prompt
Act as a product designer-engineer who ships polished internal tools. Build a responsive analytics dashboard using React + Tailwind CSS only (no component library, no charting library). Layout (mobile-first): - **Top row — 4 KPI stat cards**: label, large value, delta badge vs last period (emerald-500 + ▲ for positive, red-500 + ▼ for negative), and a tiny inline sparkline (a 7-point SVG polyline showing the last 7 days). Cards stack 1-up on mobile, 2-up at `sm`, 4-up at `lg`. - **Middle row**: one large chart container (placeholder div with dashed border and label) spanning `lg:col-span-2`, and a compact 'Top Items' list card spanning `lg:col-span-1`. Both full-width on mobile. - **Bottom**: a recent-activity table with sticky header, zebra rows (`even:bg-gray-50 dark:even:bg-gray-800`), and a 'Load more' button. Micro-interactions (CSS + React only): - Stat card values use a counting-up animation on mount: start from 0, ease-out to the real number over 600ms using `requestAnimationFrame`. Extract this into a `useCountUp(target, duration)` hook. - Delta badges fade-and-slide in (`opacity-0 translate-y-1` → `opacity-100 translate-y-0`) with a 200ms delay after the count finishes. - Cards have `hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200`. Dark mode: - Support `class` strategy (`dark:` variants). Provide a toggle button in the top-right that adds/removes `dark` on `<html>`. - Define all custom colors via CSS variables so theming is one-place: `--color-surface`, `--color-surface-alt`, `--color-text-primary`, `--color-text-muted`. Skeleton loading: - Export a `<DashboardSkeleton />` component that mirrors the exact layout with `animate-pulse` placeholder blocks (rounded rectangles matching each element's dimensions). Use this as the loading state. Accessibility: real `<table>` with `<thead>`/`<tbody>`, `aria-label` on icon-only buttons, visible `focus-visible:ring-2` rings, `prefers-reduced-motion:` disables all animations. Keep it one file. Use placeholder data arrays at the top (4 KPI objects, 5 list items, 8 table rows). Return the complete component.
- Source
- promptfork seed
- License
- CC-BY-4.0
- Published
- 6/23/2026