Blenra LogoBlenra
Optimized for: Gemini / ChatGPT / Claude
#Tailwind

Horizontal Scrolling Mobile-First Pricing Table Prompt

Customize the variables below to instantly engineer your prompt.

Required Variables

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 Text 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."

More Web Components Prompts

View all →

Frequently Asked Questions

What is the "Horizontal Scrolling Mobile-First Pricing Table Prompt" prompt used for?

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.

Which AI tools work with this prompt?

This prompt is optimized for Gemini / ChatGPT / Claude, but works great with ChatGPT, Claude, Gemini, and other large language models. Simply copy it and paste it into your preferred AI tool.

How do I customize this prompt?

Use the variable fields above to fill in your specific details. The prompt will auto-update as you type, ready to copy instantly.

Is this prompt free?

Yes! All prompts on Blenra are free to copy and use immediately. No account required.