Inventory management table
A dark inventory table: stock bars fill, a low-stock row flashes red, Reorder is pressed and the item flips to Restocked.
Use it with Claude or any AI tool. Copy the prompt and paste it in. The link inside gives the AI the whole page as Markdown.
Live preview of the result built from this prompt. Click to pause.
Overview
Three KPI tiles count up, six product rows show animated stock bars and the Monitor arm row flashes as low stock. A Reorder button is pressed, the bar refills to green and a purchase order toast appears. Topic inspired by OpenDesign’s public dashboard prompt list; this prompt and design are written from scratch.
Build it step by step
Sign in to tick steps off-
1
Paste the prompt
The AI builds the KPI tiles and the stock table.
Build a single-file HTML inventory management screen, 1280x720, dark slate background #111827, panels #1a2336, border #263250, text #e5e9f2, green #34d399, red #f87171, blue #2b6cff. System fonts, no libraries. Top: three KPI tiles - Units in stock (counts to 1284), Low stock items (7), Fill rate (96%) - using CSS @property integer counters. Table: columns Product, SKU, Stock level, action. Six rows: Oak desk 140cm, Ergo chair Pro, Standing mat, Monitor arm dual (low, 12 percent), USB-C dock, Cable tray kit. Stock level is a 220px rounded bar plus a small status badge (green In stock, red Low stock). Motion (8 second loop): rows rise in, bars grow to their value. The Monitor arm row flashes a faint red twice, its bar is red. A blue Reorder button on that row is pressed (scale .9), then the bar grows to 92 percent and turns green and the badge switches to green Restocked. A green toast "Purchase order #PO-2291 sent to supplier" slides up bottom right. Fade out at the end and restart. Respect prefers-reduced-motion. Return only the complete HTML.
-
2
Check the low stock flash
Only the Monitor arm row should flash red.
-
3
Check the reorder
After the press the bar turns green and a toast appears.
Done when You can see it working in the browser.
-
4
Make it real
Connect stock levels and the reorder action to your data.
Files and links
What people built
Show yoursNobody has shared a build yet. Yours could be the first.
Show what you built
Built this plan? Sign in to share your demo video, live app and screenshots.