Tablecloth — Data tables you actually want to look at

Summary

A friendly light-SaaS marketing page for a table-generator product ('Tablecloth'), built around two data-table cards: a floating hero preview ('Active accounts') and a full 6-row 'Customer roster' showcase. Each row pairs an avatar cell with a live presence dot, a pill status badge with a leading dot, a slim inline progress bar with a percentage, and a due-date chip. The look is warm-cream paper with a sky-blue primary and coral secondary, fully rounded cards (rounded-4xl / 2rem) on soft sky-tinted shadows, Poppins throughout, a sticky blurred nav, and a responsive reflow where the desktop CSS-grid columns stack into 2-up labelled card rows on mobile.

Style

A warm, playful light-SaaS aesthetic on a cream paper canvas (#fdf9f3) with a dark indigo-ink text color (#2c2a3a), a sky-blue primary family (#38bdf8 / deep #0ea5e9 / soft #e0f5ff) and a coral secondary family (#fb7185 / deep #f43f5e / soft #ffe7eb). Status colors are semantic: emerald for healthy/active, amber for at-risk, coral for churning, neutral ink for invited/pending. Cards are heavily rounded (2rem 'rounded-4xl') white surfaces floating on soft, colored, long-throw shadows (sky-tinted on cards, coral-tinted on lifts) over a faint radial-dot paper grain, with hairline ink/5 borders and ring outlines. Everything is set in Poppins (400-800). The mood is approachable and rounded rather than corporate: pill badges, pill buttons, gentle float animation, and a hand-drawn coral highlight swipe under a hero word.

Layout & Structure

A standard centered marketing page: every section uses a `mx-auto max-w-7xl px-6 lg:px-8` container. A sticky blurred header tops the page, then a two-column hero (copy left, a floating table-preview card right with a float animation and a floating prompt chip), a thin centered trust strip, the main 'showcase' section with a full 6-row customer table card (toolbar + grid column header + rows + pagination footer), a 4-up component-kit grid, a 3-step 'how it works' band, a dark rounded CTA banner, and a footer. The data tables are built as CSS grids (not <table>): a desktop column-header row plus row divs sharing the same `grid-template-columns`, reflowing to a 2-column labelled card layout below lg/sm.

Sticky blurred nav

Two-column hero with floating table preview

Trust strip

Showcase full data-table card (CSS-grid table)

Responsive table reflow

Component kit + steps + dark CTA + footer

Special Notes

Stack: Tailwind (CDN) with a custom theme, Poppins via Google Fonts, Phosphor + Simple Icons via Iconify (icons used: ph:table-bold, ph:arrow-up-right-bold, ph:sparkle-fill, ph:magic-wand-fill, ph:funnel-bold, ph:export-bold, ph:users-three-bold, ph:magnifying-glass-bold, ph:plus-bold, ph:dots-three-bold, ph:caret-left/right-bold, ph:identification-badge-bold, ph:seal-check-bold, ph:chart-bar-horizontal-bold, ph:calendar-dots-bold, ph:clock-bold, ph:warning-bold, ph:chat-circle-dots-fill, ph:path-fill, ph:squares-four-fill, ph:stack-fill, ph:atom-bold, ph:figma-logo-bold, ph:x-logo-bold, ph:github-logo-bold, simple-icons:vuedotjs/svelte/tailwindcss). Exact tokens: cream #fdf9f3 (page), ink #2c2a3a (text, used at /40 /45 /55 /60 /65 /5 opacities), sky #38bdf8 / sky-deep #0ea5e9 / sky-soft #e0f5ff (primary), coral #fb7185 / coral-deep #f43f5e / coral-soft #ffe7eb (secondary), progress track #eef0f4, dark CTA gradient ink -> #3a3852. Tailwind extras: borderRadius '4xl' = 2rem; boxShadow card '0 18px 50px -22px rgba(56,189,248,0.45)', soft '0 10px 30px -16px rgba(44,42,58,0.30)', lift '0 26px 70px -30px rgba(251,113,133,0.45)'. Key technique: the data tables are CSS grids (matching grid-template-columns on the header row and the row divs) rather than <table> elements, which is what lets them reflow to labelled 2-up cards on mobile via the .fld-label helper (hidden on lg, shown below 1023px). Use min-w-0 + truncate on text cells so long names/emails clip instead of overflowing the grid track.