Responsive Service Landing Page with Tailwind CSS

---
id: "c2a28387-0740-444d-bd50-18ff044d4cca"
name: responsive-service-landing-page-with-tailwind-css-335a268ab7e8
description: "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."
version: "0.1.0"
tags:
  - "web development"
  - "tailwind css"
  - "landing page"
  - "responsive design"
  - "seo"
  - "html"
triggers:
  - "Create a landing page"
  - "Service landing page with Tailwind"
  - "Responsive service website"
  - "Landing page with service cards"
  - "SEO optimized landing page"
---

# 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