Filterable data table
Copy this prompt into Claude, Cursor or Lovable.
Make a single-file HTML data table screen, 1280x720, graphite background #0e1014, text #e7e9ee, lime accent #c8f560, monospace font stack (ui-monospace, Menlo, Consolas). No libraries.
Header: H1 "Accounts" and subtitle "Filter, sort and review every customer in one place".
Toolbar: a 420px search input with lime text, a chip "Plan: Enterprise x" and a second chip "Status: Any", and a result counter on the right.
Table: columns Account, Plan, Status, ARR (right aligned, bold). Eight rows of realistic companies (Northwind Traders, Pixel Forge, Atlas Logistics, Moss & Wren, Helio Systems, Daybreak Cafe, Quill Studio, Brightpath Edu). Plan and Status are small tags; Enterprise tags are lime tinted, Trial and Renewing are amber tinted.
Motion (8 second loop): rows rise in one after another. The search box types "enterprise" using a steps() width animation and a blinking caret. The Plan chip lights up (lime border and tint). Rows that are not Enterprise fade to 8 percent opacity with a 2px blur, and Enterprise rows get a faint lime background. The counter cross-fades from "Showing 8 of 8" to "Showing 3 of 8". Then everything resets.
Respect prefers-reduced-motion. Return only the complete HTML.Source, 12 lines
# Filterable data table Copy this prompt into Claude, Cursor or Lovable. ```text Make a single-file HTML data table screen, 1280x720, graphite background #0e1014, text #e7e9ee, lime accent #c8f560, monospace font stack (ui-monospace, Menlo, Consolas). No libraries. Header: H1 "Accounts" and subtitle "Filter, sort and review every customer in one place". Toolbar: a 420px search input with lime text, a chip "Plan: Enterprise x" and a second chip "Status: Any", and a result counter on the right. Table: columns Account, Plan, Status, ARR (right aligned, bold). Eight rows of realistic companies (Northwind Traders, Pixel Forge, Atlas Logistics, Moss & Wren, Helio Systems, Daybreak Cafe, Quill Studio, Brightpath Edu). Plan and Status are small tags; Enterprise tags are lime tinted, Trial and Renewing are amber tinted. Motion (8 second loop): rows rise in one after another. The search box types "enterprise" using a steps() width animation and a blinking caret. The Plan chip lights up (lime border and tint). Rows that are not Enterprise fade to 8 percent opacity with a 2px blur, and Enterprise rows get a faint lime background. The counter cross-fades from "Showing 8 of 8" to "Showing 3 of 8". Then everything resets. Respect prefers-reduced-motion. Return only the complete HTML. ```