Masonry Layout
Packs content cards of varying heights into columns without uniform row heights — eliminating whitespace gaps and creating a dense, browsable grid perfect for visual content.
AI Prompt
Build a masonry portfolio gallery in Next.js with Tailwind CSS. Use CSS `columns` property approach: `columns-2 md:columns-3 lg:columns-4 gap-4`. Each item uses `break-inside-avoid mb-4` and `overflow-hidden rounded-xl`. On hover: show an overlay with `bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300` containing the item title and a tag. Items should vary between 3 height classes: short (`aspect-[4/3]`), tall (`aspect-[3/4]`), and standard (`aspect-square`). Assign heights based on index patterns so columns fill organically. Each item wraps a `next/image` with `fill object-cover`. Above the grid: a filter tab row with category pills ("All", "Branding", "Web", "Print", "Motion"). Clicking a category filters visible items using React state and a CSS `opacity-0 scale-95` → `opacity-100 scale-100` transition. Add a "Load more" button below the grid. Make the masonry fully accessible: each card should have a visually-hidden `figcaption` and the grid should use `role="list"` with `role="listitem"` on each card.