marketing

Marketing Feature Grid

A 2x2 bento-grid feature section.

bento features grid | Gemini 3.1 Pro

Prompt 

# Role
You are a Creative Technologist and Frontend Expert specializing in modern marketing layouts and visual storytelling through UI design.

# Objective
Build a 2x2 bento-style feature grid section that highlights four key product or service features with a visually engaging, asymmetric layout optimized for marketing landing pages.

# Instructions
1. Create a bento grid container with a 2x2 layout:
   - Top-left: large feature card spanning emphasis (can be taller or wider)
   - Top-right: standard feature card
   - Bottom-left: standard feature card
   - Bottom-right: large feature card (mirror emphasis of top-left)
2. Each feature card must include:
   - An icon or illustration placeholder (SVG or emoji)
   - A bold feature title (short, action-oriented)
   - A brief description (1–2 sentences max)
   - Optional: subtle background pattern or gradient unique to each card
3. Add hover interactions:
   - Subtle lift effect with increased shadow
   - Slight border glow or color accent shift
4. Style with Tailwind CSS in dark mode:
   - Dark card backgrounds with low-opacity borders
   - Consistent padding, rounded corners, and spacing
   - Accent colors to differentiate each feature

# Constraints
- Use semantic HTML (`<section>`, `<article>`, `<h3>`, `<p>`)
- Tailwind CSS only — no custom CSS unless needed for grid spans
- Responsive: single column on mobile, 2x2 on tablet and desktop
- Keep text concise — titles under 5 words, descriptions under 20 words
- Add `aria-label` on the section for screen reader context

# Output Format
- Single HTML file using Tailwind CSS CDN
- Clean, well-indented markup with comments for each grid cell
- Use placeholder content that demonstrates a realistic SaaS feature set

Notes

Prompt

Role

You are a Creative Technologist and Frontend Expert specializing in modern marketing layouts and visual storytelling through UI design.

Objective

Build a 2x2 bento-style feature grid section that highlights four key product or service features with a visually engaging, asymmetric layout optimized for marketing landing pages.

Instructions

  1. Create a bento grid container with a 2x2 layout:
    • Top-left: large feature card spanning emphasis (can be taller or wider)
    • Top-right: standard feature card
    • Bottom-left: standard feature card
    • Bottom-right: large feature card (mirror emphasis of top-left)
  2. Each feature card must include:
    • An icon or illustration placeholder (SVG or emoji)
    • A bold feature title (short, action-oriented)
    • A brief description (1–2 sentences max)
    • Optional: subtle background pattern or gradient unique to each card
  3. Add hover interactions:
    • Subtle lift effect with increased shadow
    • Slight border glow or color accent shift
  4. Style with Tailwind CSS in dark mode:
    • Dark card backgrounds with low-opacity borders
    • Consistent padding, rounded corners, and spacing
    • Accent colors to differentiate each feature

Constraints

  • Use semantic HTML (<section>, <article>, <h3>, <p>)
  • Tailwind CSS only — no custom CSS unless needed for grid spans
  • Responsive: single column on mobile, 2x2 on tablet and desktop
  • Keep text concise — titles under 5 words, descriptions under 20 words
  • Add aria-label on the section for screen reader context

Output Format

  • Single HTML file using Tailwind CSS CDN
  • Clean, well-indented markup with comments for each grid cell
  • Use placeholder content that demonstrates a realistic SaaS feature set

Notes

  • Bento grids work best with varying card sizes — avoid making all 4 cards identical.
  • Use grid-template-rows and grid-template-columns with spans for the asymmetric layout.
  • Perfect for quick integration into any Astro or static site project.

Related Prompts

View prompt details

SaaS Pricing Table

Three-tier pricing table with a highlighted 'Pro' plan.

# Role You are a Creative Technologist and Frontend Expert specializing in conversion-optimized SaaS pricing layouts and visual hierarchy design. # Objective Build a three-tier SaaS pricing table with a visually highlighted "Pro" plan, feature comparison lists, and CTA buttons — designed to guide users toward the recommended plan. # Instructions 1. Create a 3-column pricing layout: - **Free** tier (left): basic features, $0/month - **Pro** tier (center): most popular, highlighted with accent border/glow and "Most Popular" badge - **Enterprise** tier (right): premium features, custom pricing or highest price 2. Each pricing card must include: - Plan name (bold heading) - Price display: large number with currency symbol and "/month" suffix - Brief description (1 line) of the plan - Feature list with checkmark (✓) icons for included features - Dash (—) or muted text for features not included - CTA button at the bottom: "Get Started", "Upgrade", or "Contact Sales" 3. Highlight the Pro (recommended) plan: - Slightly larger or elevated card - Accent-colored border or glow effect - "Most Popular" badge at the top - CTA button with filled accent color (other plans use outline style) 4. Optional: add a monthly/annual toggle above the pricing cards: - Toggle switch or segmented control - Show discounted annual pricing when toggled 5. Style in dark mode with Tailwind CSS: - Dark card backgrounds with subtle borders - Consistent typography and spacing - Responsive: stack cards vertically on mobile # Constraints - Use semantic HTML with proper heading hierarchy - Tailwind CSS only — no custom CSS - Add `aria-label` on the pricing section and CTA buttons - Feature lists must align across all three cards for easy comparison - Include at least 6 features per plan - Responsive: single column on mobile, 3 columns on desktop # Output Format - Single HTML file using Tailwind CSS CDN - Include realistic SaaS pricing content (project management or developer tool theme) - Well-structured markup with comments marking each plan section

pricing saas grid
Gemini 3.1 Pro
View prompt details

Feature Showcase Section

Icon-based feature grid with hover lift effect.

# Role You are a Senior Frontend Engineer and Conversion Specialist with expertise in landing page design and visual hierarchy optimization. # Objective Build a feature showcase section that presents product or service features in a visually compelling 3-column grid with icon-driven cards, hover interactions, and responsive behavior. # Instructions 1. Create a section with a centered heading and subheading: - Section title: bold, large (e.g., "Why Choose Us" or "Features") - Subtitle: muted, descriptive one-liner beneath the title 2. Build a 3-column grid of feature cards: - Each card contains: - Icon container: 48x48px circle or rounded square with gradient background - SVG icon inside the container (use Lucide or Heroicons style) - Feature title: bold, concise (3–5 words) - Feature description: muted text, 1–2 sentences (under 20 words) 3. Add hover interactions on each card: - Subtle upward lift (`translateY(-4px)`) - Increased `box-shadow` for depth - Smooth transition (200ms ease) 4. Style with a dark-mode-first design: - Dark card backgrounds with subtle borders - Gradient icon containers using brand-compatible accent colors - Consistent spacing and alignment across all cards 5. Ensure responsive layout: - 1 column on mobile (<640px) - 2 columns on tablet (640px–1024px) - 3 columns on desktop (>1024px) # Constraints - Use semantic HTML (`<section>`, `<article>`, `<h3>`, `<p>`) - CSS Grid or Flexbox for layout — no JavaScript required - Use inline SVG icons or placeholder icon containers — do not rely on external icon CDNs - Keep all descriptions under 20 words for scannability - 6 feature cards total (2 rows of 3) for visual balance # Output Format - Single HTML file with embedded `<style>` block - Include 6 placeholder features with realistic SaaS content - Well-indented code with comments for each section

features icons grid +1
GPT 5.3 Ultra