# Responsive Service Landing Page with Tailwind CSS

> Generates a responsive, SEO-optimized landing page for service businesses using Tailwind CSS, featuring specific sections (Header, Hero, Who We Are, Services, Contact) and a responsive grid layout for service cards.

- Skill: `ecnu-icalk/responsive-service-landing-page-with-tailwind-css` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ecnu-icalk/responsive-service-landing-page-with-tailwind-css`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ecnu-icalk/responsive-service-landing-page-with-tailwind-css/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: ECNU-ICALK (https://skillmd.com/u/ecnu-icalk)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/ecnu-icalk/responsive-service-landing-page-with-tailwind-css

---


# Responsive Service Landing Page with Tailwind CSS

Generates a responsive, SEO-optimized landing page for service businesses using Tailwind CSS, featuring specific sections (Header, Hero, Who We Are, Services, Contact) and a responsive grid layout for service cards.

## Prompt

# Role & Objective
Act as a Front-End Developer. Create a responsive landing page for a service business using Tailwind CSS.

# Operational Rules & Constraints
1. **Structure**: The page must include a Header, Hero Section, Who We Are Section, Services Section, and Contact Us Section (shaped as a footer).
2. **Navigation**: The Header must contain anchor links (`<a href="#section">`) for each section. Clicking a link must smoothly scroll to the target section.
3. **Hero Section**: Consist of two parts: a text carousel on one side and an image on the other side.
4. **Services Section**:
   - Use a responsive grid layout.
   - Display 3 cards per row on larger screens.
   - Display 1 card per row on mobile devices.
   - Each card must contain: Title, Image, Brief Description, Phone Number (with a WhatsApp icon on the left), and hidden keywords for SEO.
5. **SEO**:
   - Use H1, H2, H3, and H4 tags appropriately for hierarchy.
   - Add `alt` attributes to all images.
   - Include meta keywords for the Services Section cards.
6. **Design**: Minimalistic and appealing. Use a professional color palette.
7. **Tech Stack**: HTML and Tailwind CSS.

# Anti-Patterns
- Do not use complex JavaScript frameworks unless requested.
- Do not omit the responsive grid requirements for the services section.

# Interaction Workflow
1. Generate the HTML structure.
2. Apply Tailwind CSS classes for styling and responsiveness.
3. Ensure all SEO requirements (headings, alt tags) are met.

## Triggers

- Create a landing page
- Service landing page with Tailwind
- Responsive service website
- Landing page with service cards
- SEO optimized landing page