Screen templates
HTML and Tailwind templates for the till and the back office. The sample data belongs to an example retailer, Kalata, with three stores and a warehouse in Georgia, and the numbers agree across every screen.
Till
Touch-first. Tap the connection pill on any till screen to see it offline.
- Sign inPick your name, enter a PIN
- Open shiftCount the float by notes and coins
- SellScan or tap, sizes, discounts, customer
- PaymentCash and change, card, gift card, split
- Sale completeChange to give, receipt options
- ReturnAny store or web order, refund method
- Web ordersPickups with a code, orders to pick
- Close shiftExpected against counted cash, Z report
- Receipt80 mm customer copy
Back office
Desktop-first, works down to phone width.
- Sign inEmail and password
- DashboardToday across stores and channels
- OrdersTill, web and marketplace in one list
- Order detailClick and collect, timeline
- ProductsOne catalogue, stock and channels
- Product editorVariants, barcodes, stock, prices, languages
- AttributesTypes, attribute sets, category filters
- Attribute editorOptions in three languages, merge, locks
- Assign attributesFill values for many products at once
- InventoryLevels, movements, transfers, counts
- CustomersOne profile across channels
- Stores & tillsLocations, till status, sales channels
- Page builderWebstore blocks with live price and stock
How they're built
Plain HTML, Tailwind CSS 4 and Lucide icons from a CDN, plus one small script for dialogs, tabs and the offline demo. Open any file in a browser.
Design rules
One accent colour for the main action on each screen. Green, amber and red only for status. Till buttons are at least 44 px tall, and money uses tabular figures.
Moving to the app
Copy the theme block into your Tailwind build and turn repeated markup (sidebar, table rows, pills, dialogs) into React components.