Bento Progress Wizard

A bento-mosaic layout mixing progress tiles, an interactive question card, and a helpful tip, using a playful light palette for an online course builder.

Customize in AI Studio

Interactive Live Sandbox

Use with ChatGPT, Claude, Cursor, Antigravity or Redesignr AI:Paste this prompt into any AI agent to recreate, customize, or generate brand-specific adaptations of this faq layout.

Create a high-converting, fully responsive FAQ section for a modern website.

COMPONENT SPECIFICATIONS:
- Section Name: Bento Progress Wizard
- Category: FAQ
- Structural Layout: bento-mosaic
- Visual Design Style: playful-rounded (light palette)
- Purpose: A bento-mosaic layout mixing progress tiles, an interactive question card, and a helpful tip, using a playful light palette for an online course builder.

IMPLEMENTATION REQUIREMENTS:
1. Styling & Framework: Build with standard Tailwind CSS utility classes and clean semantic HTML5 / React JSX.
2. Responsive Architecture:
   - Mobile (375px - 640px): Single-column stacked layout, touch-friendly CTA buttons, and compact padding (py-12 px-4).
   - Tablet (768px - 1024px): Balanced 2-column or asymmetric grid with readable typography hierarchy.
   - Desktop (1280px - 1440px+): Full-bleed layout with maximum width (max-w-7xl), generous whitespace (py-20 lg:py-28), and refined card micro-elevations.
3. Design System & Tokens:
   - Modern typography: High-contrast headline with tight tracking (tracking-tight), readable body copy (text-sm/text-base), and uppercase eyebrow tags.
   - Borders & Accents: Subtle 1px borders (border-neutral-200 dark:border-neutral-800), smooth rounded corners (rounded-2xl), and warm amber/gold CTA gradient fills.
   - Accessibility: WCAG AA contrast compliance and crisp SVG/Lucide icon markers.
4. Output: Standalone <section> component ready to copy and drop into production.

📐 Layout Archetype

bento-mosaic — Engineered with responsive CSS flexbox and CSS grids that collapse gracefully on smaller viewports.

🎨 Visual Style Language

playful-rounded — High contrast baseline typography, fine hairline borders, and subtle interactive elevations.

⚡ Production Ready

100% pure Tailwind CSS utility classes with zero build steps or heavy node modules. Drop directly into React, Next.js, Vue, or HTML.

Discover Similar

More FAQ & Accordions

View All

faq

Pastel Split Columns

A split layout with a sticky heading on the left and FAQ list on the right, with smooth animation.

View Details & Code

faq

Neon Chevron Accordion

Classic stacked accordion with neon glow and animated chevrons, single-expand default.

View Details & Code

faq

Split Neon Panels FAQ

Two-column layout with a neon header on the left and accordion list on the right; each row is a glass panel with glowing edge.

View Details & Code