tailwind-marketing
Installation
SKILL.md
Tailwind CSS Marketing Pages
1. Hero Section Patterns
| Variant | Structure | Best For |
|---|---|---|
| Simple centered | Centered heading + subtext + CTA button pair | SaaS landing pages |
| Split with image | 2-col grid: text left, image right | Product showcase |
| With app screenshot | Centered text + full-width screenshot below | App launch pages |
| Background image | Full-bleed bg image + dark overlay + white text | Visual impact, events |
| With phone mockup | Text block + device frame image | Mobile app marketing |
| With image tiles | Text block + asymmetric image grid | Portfolio, creative agency |
Hero Text Scaling
Use responsive font sizes for headings. Standard pattern: