Convert CSS to Tailwind CSS Utilities

Rewrite traditional CSS classes using Tailwind utility classes.

category:modernization

tailwind

css

frontend

design-system

Prompt

Translate these CSS rules into Tailwind CSS.

Rules:
- Prefer existing Tailwind spacing, color, and typography tokens
- Use responsive prefixes (sm:, md:, lg:) instead of media queries
- Use state variants (hover:, focus:, active:) instead of separate classes
- Avoid inline styles unless absolutely necessary

Return:
- Example HTML markup using Tailwind classes
- Notes about any compromises or design changes.