# TailAdmin Template Reference

Source URL: https://themewagon.github.io/TailAdmin/

Use this as a cached local description of the TailAdmin direction. Recreate the feel with Tailwind CDN, Inter, Font Awesome, relative links, and local page JavaScript only.

## Layout Pattern
- Modern Tailwind admin shell with fixed sidebar, top header, and generous but compact content spacing.
- Sidebar supports nested module groups and active route indicators.
- Header contains search, alerts, quick actions, and user controls.
- Main content uses dashboard widgets, forms, tables, charts, and settings cards.

## Components To Emulate
- Rounded KPI cards with icon circles and small trend chips.
- Clean table cards with toolbar, search, filters, pagination footer, and row actions.
- Form panels with two-column desktop layout and stacked mobile layout.
- Modal overlays with strong focus state, form validation text, and save/cancel actions.
- Toast notifications for add/edit/delete success.

## Visual Direction
- Smooth SaaS look: white cards, subtle gray borders, carefully spaced controls, and one vivid accent.
- Fit top navigation flush to the top when a topbar exists.
- Fit left sidebar flush to the left when a sidebar exists unless the BA brief requests otherwise.
- Avoid oversized heroes for management apps.

## Responsive Behavior
- Sidebar becomes drawer on mobile.
- Preview tables should remain usable with horizontal scroll or card rows.
- Sticky action bars are acceptable on small screens when forms are long.
