בניית Bento Grid רספונסיבי ב-Tailwind | VibeScale Prompts
חזרה לכל הפרומפטים

בניית Bento Grid רספונסיבי ב-Tailwind

פרומפט שמייצר פריסת "בנטו" (כמו של אפל) שמתאימה את עצמה מושלם למובייל ולדסקטופ.

מודל: v0 / Cursorקטגוריה: עיצוב
Build a 4-column Bento Grid layout using Tailwind CSS and React.

REQUIREMENTS:
1. Desktop: Some cards should span 2 columns or 2 rows to create visual hierarchy.
2. Mobile: The grid must collapse to 1 column gracefully.
3. Aesthetics: Cards should have a subtle border-radius (rounded-3xl), light inner shadows, and a hover transition that slightly lifts the card.
4. Content: Include placeholders for an Image, an Icon, a Title, and a Description in each card.

Output the code for the main grid container and a reusable 'BentoCard' sub-component.

מתי כדאי להשתמש?

עמוד תכונות (Features) או פורטפוליו שמראה המון מידע בצורה מאורגנת.