Galleries
10 components in this category
Galleries 10 · Viewer with arrows
A dark viewer with one large image, previous and next buttons, a counter and thumbnails.
<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
<section class='bg-black'><div class='mx-auto max-w-5xl px-6 py-16'><div class='relative aspect-[16/9] rounded-3xl bg-neutral-900 overflow-hidden'><img src='https://images.unsplash.com/photo-1487523117656-d5d117ad47c5?auto=format&fit=crop&w=1400&q=75' alt='Two monitors on a wooden desk' loading='lazy' class='h-full w-full object-cover grayscale'><button type='button' class='absolute left-4 top-1/2 grid h-11 w-11 -translate-y-1/2 place-items-center rounded-full bg-white text-black' aria-label='Previous'>←</button><button type='button' class='absolute right-4 top-1/2 grid h-11 w-11 -translate-y-1/2 place-items-center rounded-full bg-white text-black' aria-label='Next'>→</button><span class='absolute bottom-4 right-4 rounded-full bg-black/70 px-3 py-1 text-xs text-white'>1 / 8</span></div><div class='mt-4 grid grid-cols-5 gap-3'><div class='aspect-[4/3] rounded-lg bg-neutral-700 ring-2 ring-white overflow-hidden'><img src='https://images.unsplash.com/photo-1487523117656-d5d117ad47c5?auto=format&fit=crop&w=200&q=75' alt='Two monitors on a wooden desk' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='aspect-[4/3] rounded-lg bg-neutral-800 overflow-hidden'><img src='https://images.unsplash.com/photo-1487338875411-8880f74114a2?auto=format&fit=crop&w=200&q=75' alt='Two monitors showing design work on a desk' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='aspect-[4/3] rounded-lg bg-neutral-800 overflow-hidden'><img src='https://images.unsplash.com/photo-1637502875124-eb4a9843a2fa?auto=format&fit=crop&w=200&q=75' alt='A laptop showing a website design on a desk' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='aspect-[4/3] rounded-lg bg-neutral-800 overflow-hidden'><img src='https://images.unsplash.com/photo-1486486955648-a4f22566c598?auto=format&fit=crop&w=200&q=75' alt='A desk with a monitor and keyboard' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='aspect-[4/3] rounded-lg bg-neutral-800 overflow-hidden'><img src='https://images.unsplash.com/photo-1765371514743-45bd8e6c0a28?auto=format&fit=crop&w=200&q=75' alt='A modern office interior with glass walls and plants' loading='lazy' class='h-full w-full object-cover grayscale'></div></div></div></section>
Galleries 09 · Filter pills
A row of category pills above a grid of image placeholders; the first pill is selected.
<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
<section class='bg-white'><div class='mx-auto max-w-6xl px-6 py-24'><div class='flex flex-wrap gap-2 text-sm'><span class='rounded-full bg-black px-4 py-1.5 font-medium text-white'>All</span><span class='rounded-full border border-neutral-300 px-4 py-1.5 text-neutral-700'>Landing</span><span class='rounded-full border border-neutral-300 px-4 py-1.5 text-neutral-700'>App</span><span class='rounded-full border border-neutral-300 px-4 py-1.5 text-neutral-700'>Blog</span></div><div class='mt-8 grid grid-cols-2 gap-4 md:grid-cols-4'><div class='aspect-square rounded-2xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1765371514743-45bd8e6c0a28?auto=format&fit=crop&w=500&q=75' alt='A modern office interior with glass walls and plants' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='aspect-square rounded-2xl bg-neutral-200 overflow-hidden'><img src='https://images.unsplash.com/photo-1511385348-a52b4a160dc2?auto=format&fit=crop&w=500&q=75' alt='A laptop on a desk beside a plant' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='aspect-square rounded-2xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1543487945-139a97f387d5?auto=format&fit=crop&w=500&q=75' alt='A Helvetica alphabet poster on a wall' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='aspect-square rounded-2xl bg-neutral-200 overflow-hidden'><img src='https://images.unsplash.com/photo-1738844153732-a485f0e78382?auto=format&fit=crop&w=500&q=75' alt='A black and white building corner' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='aspect-square rounded-2xl bg-neutral-200 overflow-hidden'><img src='https://images.unsplash.com/photo-1629494893504-d41e26a02631?auto=format&fit=crop&w=500&q=75' alt='A smartphone with a blank screen' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='aspect-square rounded-2xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1499750310107-5fef28a66643?auto=format&fit=crop&w=500&q=75' alt='A laptop, notebook and mug on a wooden desk' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='aspect-square rounded-2xl bg-neutral-200 overflow-hidden'><img src='https://images.unsplash.com/photo-1763046289892-857b83dc070f?auto=format&fit=crop&w=500&q=75' alt='White architecture with stairs and shadows' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='aspect-square rounded-2xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1667312939978-64cf31718a6e?auto=format&fit=crop&w=500&q=75' alt='A lamp and books on a shelf' loading='lazy' class='h-full w-full object-cover grayscale'></div></div></div></section>
Galleries 08 · Hover overlay titles
A grid of images where a black overlay with a title fades in on hover.
<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
<section class='bg-white'><div class='mx-auto max-w-6xl px-6 py-24'><div class='grid gap-4 sm:grid-cols-2 lg:grid-cols-3'><a href='#' class='group relative block aspect-[4/3] overflow-hidden rounded-2xl bg-neutral-100'><img src='https://images.unsplash.com/photo-1637502875124-eb4a9843a2fa?auto=format&fit=crop&w=700&q=75' alt='A laptop showing a website design on a desk' loading='lazy' class='h-full w-full object-cover grayscale'><span class='absolute inset-0 flex items-end bg-black/70 p-5 text-white opacity-0 transition group-hover:opacity-100'><span class='font-semibold'>Landing page</span></span></a><a href='#' class='group relative block aspect-[4/3] overflow-hidden rounded-2xl bg-neutral-200'><img src='https://images.unsplash.com/photo-1487338875411-8880f74114a2?auto=format&fit=crop&w=700&q=75' alt='Two monitors showing design work on a desk' loading='lazy' class='h-full w-full object-cover grayscale'><span class='absolute inset-0 flex items-end bg-black/70 p-5 text-white opacity-0 transition group-hover:opacity-100'><span class='font-semibold'>Pricing page</span></span></a><a href='#' class='group relative block aspect-[4/3] overflow-hidden rounded-2xl bg-neutral-100'><img src='https://images.unsplash.com/photo-1757821803173-1b8a0250f73a?auto=format&fit=crop&w=700&q=75' alt='An open notebook with a pen' loading='lazy' class='h-full w-full object-cover grayscale'><span class='absolute inset-0 flex items-end bg-black/70 p-5 text-white opacity-0 transition group-hover:opacity-100'><span class='font-semibold'>Blog</span></span></a></div></div></section>
Galleries 07 · Two large with captions
Two big images side by side, each with a title and a one-line caption below. Sample captions.
<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
<section class='bg-white'><div class='mx-auto max-w-6xl px-6 py-24'><div class='grid gap-8 md:grid-cols-2'><figure><div class='aspect-[4/3] rounded-3xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1471107340929-a87cd0f5b5f3?auto=format&fit=crop&w=900&q=75' alt='A fountain pen on a ruled notebook' loading='lazy' class='h-full w-full object-cover grayscale'></div><figcaption class='mt-4'><h3 class='font-semibold text-black'>Before</h3><p class='text-sm text-neutral-500'>A page rebuilt by hand.</p></figcaption></figure><figure><div class='aspect-[4/3] rounded-3xl bg-neutral-200 overflow-hidden'><img src='https://images.unsplash.com/photo-1637502875124-eb4a9843a2fa?auto=format&fit=crop&w=900&q=75' alt='A laptop showing a website design on a desk' loading='lazy' class='h-full w-full object-cover grayscale'></div><figcaption class='mt-4'><h3 class='font-semibold text-black'>After</h3><p class='text-sm text-neutral-500'>The same page designed in the editor.</p></figcaption></figure></div></div></section>
Galleries 06 · Horizontal strip
A single row of wide image cards that scrolls sideways, with a title on top.
<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
<section class='bg-white'><div class='mx-auto max-w-6xl px-6 pt-24'><h2 class='text-4xl font-semibold tracking-tight text-black'>Recent work</h2></div><div class='mt-10 flex gap-4 overflow-x-auto px-6 pb-24 lg:px-[max(1.5rem,calc((100vw-72rem)/2+1.5rem))]'><div class='h-72 w-96 shrink-0 rounded-3xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1765371514743-45bd8e6c0a28?auto=format&fit=crop&w=700&q=75' alt='A modern office interior with glass walls and plants' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='h-72 w-96 shrink-0 rounded-3xl bg-neutral-200 overflow-hidden'><img src='https://images.unsplash.com/photo-1486486955648-a4f22566c598?auto=format&fit=crop&w=700&q=75' alt='A desk with a monitor and keyboard' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='h-72 w-96 shrink-0 rounded-3xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1785997258233-8feb3adf7340?auto=format&fit=crop&w=700&q=75' alt='Geometric architecture with light and shadow' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='h-72 w-96 shrink-0 rounded-3xl bg-neutral-200 overflow-hidden'><img src='https://images.unsplash.com/photo-1637502875124-eb4a9843a2fa?auto=format&fit=crop&w=700&q=75' alt='A laptop showing a website design on a desk' loading='lazy' class='h-full w-full object-cover grayscale'></div></div></section>
Galleries 05 · Bento tiles
A bento grid of six photo tiles of different sizes.
<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
<section class='bg-white'><div class='mx-auto max-w-6xl px-6 py-24'><div class='grid h-[520px] grid-cols-4 grid-rows-3 gap-4'><div class='col-span-2 row-span-2 rounded-3xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1487523117656-d5d117ad47c5?auto=format&fit=crop&w=900&q=75' alt='Two monitors on a wooden desk' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='rounded-3xl bg-neutral-200 overflow-hidden'><img src='https://images.unsplash.com/photo-1765776035390-e9f3d5080cb3?auto=format&fit=crop&w=500&q=75' alt='Curved architectural forms in soft light' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='rounded-3xl bg-black overflow-hidden'><img src='https://images.unsplash.com/photo-1738844153732-a485f0e78382?auto=format&fit=crop&w=500&q=75' alt='A black and white building corner' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='row-span-2 rounded-3xl bg-neutral-200 overflow-hidden'><img src='https://images.unsplash.com/photo-1765371514743-45bd8e6c0a28?auto=format&fit=crop&w=500&q=75' alt='A modern office interior with glass walls and plants' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='rounded-3xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1635144937963-66b978f51ce7?auto=format&fit=crop&w=500&q=75' alt='A black and white photo of a brick wall' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='col-span-2 rounded-3xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1763046289892-857b83dc070f?auto=format&fit=crop&w=900&q=75' alt='White architecture with stairs and shadows' loading='lazy' class='h-full w-full object-cover grayscale'></div></div></div></section>
Galleries 04 · Dark with captions
Black section with three image placeholders each captioned underneath. Sample captions.
<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
<section class='bg-black'><div class='mx-auto max-w-6xl px-6 py-24'><h2 class='text-4xl font-semibold tracking-tight text-white'>Made with Windcraft</h2><div class='mt-10 grid gap-6 md:grid-cols-3'><figure><div class='aspect-[4/5] rounded-2xl bg-neutral-900 overflow-hidden'><img src='https://images.unsplash.com/photo-1637502875124-eb4a9843a2fa?auto=format&fit=crop&w=700&q=75' alt='A laptop showing a website design on a desk' loading='lazy' class='h-full w-full object-cover grayscale'></div><figcaption class='mt-3 text-sm text-neutral-400'>Landing page · Sample</figcaption></figure><figure><div class='aspect-[4/5] rounded-2xl bg-neutral-800 overflow-hidden'><img src='https://images.unsplash.com/photo-1629494893504-d41e26a02631?auto=format&fit=crop&w=700&q=75' alt='A smartphone with a blank screen' loading='lazy' class='h-full w-full object-cover grayscale'></div><figcaption class='mt-3 text-sm text-neutral-400'>Pricing page · Sample</figcaption></figure><figure><div class='aspect-[4/5] rounded-2xl bg-neutral-900 overflow-hidden'><img src='https://images.unsplash.com/photo-1487338875411-8880f74114a2?auto=format&fit=crop&w=700&q=75' alt='Two monitors showing design work on a desk' loading='lazy' class='h-full w-full object-cover grayscale'></div><figcaption class='mt-3 text-sm text-neutral-400'>Dashboard · Sample</figcaption></figure></div></div></section>
Galleries 03 · Large image and thumbnails
One large image placeholder with a row of four smaller ones beneath it.
<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
<section class='bg-white'><div class='mx-auto max-w-5xl px-6 py-24'><div class='aspect-[16/9] rounded-3xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1487523117656-d5d117ad47c5?auto=format&fit=crop&w=1200&q=75' alt='Two monitors on a wooden desk' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='mt-4 grid grid-cols-4 gap-4'><div class='aspect-[4/3] rounded-xl bg-neutral-200 ring-2 ring-black overflow-hidden'><img src='https://images.unsplash.com/photo-1487523117656-d5d117ad47c5?auto=format&fit=crop&w=300&q=75' alt='Two monitors on a wooden desk' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='aspect-[4/3] rounded-xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1487338875411-8880f74114a2?auto=format&fit=crop&w=300&q=75' alt='Two monitors showing design work on a desk' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='aspect-[4/3] rounded-xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1637502875124-eb4a9843a2fa?auto=format&fit=crop&w=300&q=75' alt='A laptop showing a website design on a desk' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='aspect-[4/3] rounded-xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1486486955648-a4f22566c598?auto=format&fit=crop&w=300&q=75' alt='A desk with a monitor and keyboard' loading='lazy' class='h-full w-full object-cover grayscale'></div></div></div></section>
Galleries 02 · Masonry columns
Image placeholders of different heights flowing into three columns.
<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
<section class='bg-white'><div class='mx-auto max-w-6xl px-6 py-24'><div class='columns-2 gap-4 space-y-4 md:columns-3'><div class='h-48 break-inside-avoid rounded-2xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1487338875411-8880f74114a2?auto=format&fit=crop&w=600&q=75' alt='Two monitors showing design work on a desk' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='h-72 break-inside-avoid rounded-2xl bg-neutral-200 overflow-hidden'><img src='https://images.unsplash.com/photo-1738844153732-a485f0e78382?auto=format&fit=crop&w=600&q=75' alt='A black and white building corner' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='h-56 break-inside-avoid rounded-2xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1497032628192-86f99bcd76bc?auto=format&fit=crop&w=600&q=75' alt='A desk seen from above with a laptop, notebook and coffee' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='h-64 break-inside-avoid rounded-2xl bg-neutral-200 overflow-hidden'><img src='https://images.unsplash.com/photo-1543487945-139a97f387d5?auto=format&fit=crop&w=600&q=75' alt='A Helvetica alphabet poster on a wall' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='h-40 break-inside-avoid rounded-2xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1629494893504-d41e26a02631?auto=format&fit=crop&w=600&q=75' alt='A smartphone with a blank screen' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='h-80 break-inside-avoid rounded-2xl bg-neutral-200 overflow-hidden'><img src='https://images.unsplash.com/photo-1486486955648-a4f22566c598?auto=format&fit=crop&w=600&q=75' alt='A desk with a monitor and keyboard' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='h-52 break-inside-avoid rounded-2xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1520529890308-f503006340b4?auto=format&fit=crop&w=600&q=75' alt='White concrete stairs' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='h-60 break-inside-avoid rounded-2xl bg-neutral-200 overflow-hidden'><img src='https://images.unsplash.com/photo-1499750310107-5fef28a66643?auto=format&fit=crop&w=600&q=75' alt='A laptop, notebook and mug on a wooden desk' loading='lazy' class='h-full w-full object-cover grayscale'></div></div></div></section>
Galleries 01 · Even grid
A grid of six equal square image placeholders under a heading.
<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
<section class='bg-white'><div class='mx-auto max-w-6xl px-6 py-24'><h2 class='text-4xl font-semibold tracking-tight text-black'>Gallery</h2><div class='mt-10 grid grid-cols-2 gap-4 md:grid-cols-3'><div class='aspect-square rounded-2xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1765371514743-45bd8e6c0a28?auto=format&fit=crop&w=600&q=75' alt='A modern office interior with glass walls and plants' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='aspect-square rounded-2xl bg-neutral-200 overflow-hidden'><img src='https://images.unsplash.com/photo-1637502875124-eb4a9843a2fa?auto=format&fit=crop&w=600&q=75' alt='A laptop showing a website design on a desk' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='aspect-square rounded-2xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1543487945-139a97f387d5?auto=format&fit=crop&w=600&q=75' alt='A Helvetica alphabet poster on a wall' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='aspect-square rounded-2xl bg-neutral-200 overflow-hidden'><img src='https://images.unsplash.com/photo-1763046289892-857b83dc070f?auto=format&fit=crop&w=600&q=75' alt='White architecture with stairs and shadows' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='aspect-square rounded-2xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1511385348-a52b4a160dc2?auto=format&fit=crop&w=600&q=75' alt='A laptop on a desk beside a plant' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='aspect-square rounded-2xl bg-neutral-200 overflow-hidden'><img src='https://images.unsplash.com/photo-1667312939978-64cf31718a6e?auto=format&fit=crop&w=600&q=75' alt='A lamp and books on a shelf' loading='lazy' class='h-full w-full object-cover grayscale'></div></div></div></section>