Blenra
Optimized for: Gemini / ChatGPT / Claude

Horizontal Scrolling Mobile-First Pricing Table Prompt

Use this engineered prompt to drastically optimize your workflow and output.

Required Variables

  • ✦[MAX_WIDTH]
  • ✦[TIER_COUNT]
horizontal-scrolling-mobile-pricing.txt
Create a Tailwind CSS pricing table specifically optimized for mobile-heavy traffic. On screens smaller than md, the tiers should be arranged in a 'snap-x snap-mandatory' horizontal scroll container with [TIER_COUNT] cards. Include a visual indicator (dots) to show current scroll position. On desktop (lg), expand the container to [MAX_WIDTH] and show all cards side-by-side. Focus on touch-friendly button sizes (minimum 44px height) and clear spacing.

Example Output

"The AI generates a layout using 'flex overflow-x-auto' for mobile and 'grid lg:grid-cols-3' for desktop, providing a seamless multi-device experience."