Product Listings

<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 grid max-w-6xl gap-12 px-6 py-20 md:grid-cols-2'><div class='grid grid-cols-4 gap-3'><div class='col-span-4 aspect-square rounded-3xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1574365569389-a10d488ca3fb?auto=format&fit=crop&w=900&q=75' alt='A natural cotton tote bag' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='aspect-square rounded-xl bg-neutral-100 ring-2 ring-black overflow-hidden'><img src='https://images.unsplash.com/photo-1574365569389-a10d488ca3fb?auto=format&fit=crop&w=300&q=75' alt='A natural cotton tote bag' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='aspect-square rounded-xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1548863227-3af567fc3b27?auto=format&fit=crop&w=300&q=75' alt='A white tote bag on a brick wall' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='aspect-square rounded-xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1544816155-12df9643f363?auto=format&fit=crop&w=300&q=75' alt='A paper-brown tote bag' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='aspect-square rounded-xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1578237493287-8d4d2b03591a?auto=format&fit=crop&w=300&q=75' alt='A black tote bag on a chair' loading='lazy' class='h-full w-full object-cover grayscale'></div></div><div><p class='text-xs font-medium uppercase tracking-widest text-neutral-500'>Bags</p><h1 class='mt-2 text-4xl font-semibold tracking-tight text-black'>Canvas Tote</h1><p class='mt-3 text-2xl text-black'>$32</p><p class='mt-5 text-neutral-600'>A sturdy everyday bag in natural cotton, with an inside pocket.</p><div class='mt-8'><p class='text-sm font-medium text-black'>Size</p><div class='mt-3 flex gap-2'><span class='rounded-lg border border-neutral-300 px-4 py-2 text-sm text-black'>S</span><span class='rounded-lg bg-black px-4 py-2 text-sm text-white'>M</span><span class='rounded-lg border border-neutral-300 px-4 py-2 text-sm text-black'>L</span></div></div><button type='button' class='mt-8 w-full rounded-xl bg-black py-3.5 text-sm font-semibold text-white hover:bg-neutral-800'>Add to cart</button><p class='mt-3 text-center text-xs text-neutral-500'>Free returns within 30 days (sample text)</p></div></div></section>

<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-20'><div class='flex flex-wrap items-center justify-between gap-4 border-b border-neutral-200 pb-5'><p class='text-sm text-neutral-600'>Showing 8 products</p><label class='flex items-center gap-2 text-sm text-neutral-600'>Sort by<select class='rounded-lg border border-neutral-300 bg-white px-3 py-1.5 text-sm text-black'><option>Featured</option><option>Price: low to high</option><option>Price: high to low</option><option>Newest</option></select></label></div><div class='mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4'><a href='#' class='block'><div class='aspect-square rounded-2xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1551380701-5dd33d5b5d06?auto=format&fit=crop&w=600&q=75' alt='A desk lamp glowing on a dark cabinet' loading='lazy' class='h-full w-full object-cover grayscale'></div><h3 class='mt-3 text-sm font-semibold text-black'>Desk Lamp</h3><p class='text-sm text-neutral-500'>$48</p></a><a href='#' class='block'><div class='aspect-square rounded-2xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1612367980327-7454a7276aa7?auto=format&fit=crop&w=600&q=75' alt='A spiral notebook on a wooden desk' loading='lazy' class='h-full w-full object-cover grayscale'></div><h3 class='mt-3 text-sm font-semibold text-black'>Notebook</h3><p class='text-sm text-neutral-500'>$14</p></a><a href='#' class='block'><div class='aspect-square rounded-2xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1570784332176-fdd73da66f03?auto=format&fit=crop&w=600&q=75' alt='A white ceramic mug on a blue surface' loading='lazy' class='h-full w-full object-cover grayscale'></div><h3 class='mt-3 text-sm font-semibold text-black'>Ceramic Mug</h3><p class='text-sm text-neutral-500'>$18</p></a><a href='#' class='block'><div class='aspect-square rounded-2xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1702561667800-2c49b0182229?auto=format&fit=crop&w=600&q=75' alt='A hand on a desk mat beside a keyboard' loading='lazy' class='h-full w-full object-cover grayscale'></div><h3 class='mt-3 text-sm font-semibold text-black'>Desk Mat</h3><p class='text-sm text-neutral-500'>$36</p></a></div></div></section>

<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 sm:grid-cols-2 lg:grid-cols-3'><article><div class='relative aspect-square rounded-3xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1583394838336-acd977736f90?auto=format&fit=crop&w=700&q=75' alt='Over-ear headphones on a white surface' loading='lazy' class='h-full w-full object-cover grayscale'><span class='absolute left-4 top-4 rounded-full bg-black px-3 py-1 text-xs font-medium text-white'>New</span></div><h3 class='mt-4 font-semibold text-black'>Studio Headphones</h3><p class='mt-1 text-sm tracking-widest text-black'>★★★★★ <span class='tracking-normal text-neutral-400'>(128)</span></p><p class='mt-2 font-medium text-black'>$129</p></article><article><div class='relative aspect-square rounded-3xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1551380701-5dd33d5b5d06?auto=format&fit=crop&w=700&q=75' alt='A desk lamp glowing on a dark cabinet' loading='lazy' class='h-full w-full object-cover grayscale'><span class='absolute left-4 top-4 rounded-full border border-black bg-white px-3 py-1 text-xs font-medium text-black'>Sale</span></div><h3 class='mt-4 font-semibold text-black'>Desk Lamp</h3><p class='mt-1 text-sm tracking-widest text-black'>★★★★☆ <span class='tracking-normal text-neutral-400'>(64)</span></p><p class='mt-2 font-medium text-black'>$38 <span class='text-sm font-normal text-neutral-400 line-through'>$48</span></p></article><article><div class='relative aspect-square rounded-3xl bg-neutral-100 overflow-hidden'><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'></div><h3 class='mt-4 font-semibold text-black'>Notebook</h3><p class='mt-1 text-sm tracking-widest text-black'>★★★★★ <span class='tracking-normal text-neutral-400'>(302)</span></p><p class='mt-2 font-medium text-black'>$14</p></article></div></div></section>

<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-3xl font-semibold tracking-tight text-black'>Shop by category</h2><div class='mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4'><a href='#' class='group relative flex aspect-square flex-col justify-end overflow-hidden rounded-3xl bg-black p-6'><img src='https://images.unsplash.com/photo-1519219788971-8d9797e0928e?auto=format&fit=crop&w=600&q=75' alt='A desk lamp on a dark cabinet' loading='lazy' class='absolute inset-0 h-full w-full object-cover grayscale transition duration-300 group-hover:scale-105'><div class='absolute inset-0 bg-gradient-to-t from-black/80 to-transparent'></div><div class='relative'><h3 class='text-lg font-semibold text-white'>Desk</h3><p class='text-sm text-neutral-300'>24 items</p></div></a><a href='#' class='group relative flex aspect-square flex-col justify-end overflow-hidden rounded-3xl bg-black p-6'><img src='https://images.unsplash.com/photo-1618366712010-f4ae9c647dcb?auto=format&fit=crop&w=600&q=75' alt='Black wireless headphones' loading='lazy' class='absolute inset-0 h-full w-full object-cover grayscale transition duration-300 group-hover:scale-105'><div class='absolute inset-0 bg-gradient-to-t from-black/80 to-transparent'></div><div class='relative'><h3 class='text-lg font-semibold text-white'>Audio</h3><p class='text-sm text-neutral-300'>12 items</p></div></a><a href='#' class='group relative flex aspect-square flex-col justify-end overflow-hidden rounded-3xl bg-black p-6'><img src='https://images.unsplash.com/photo-1574365569389-a10d488ca3fb?auto=format&fit=crop&w=600&q=75' alt='A natural cotton tote bag' loading='lazy' class='absolute inset-0 h-full w-full object-cover grayscale transition duration-300 group-hover:scale-105'><div class='absolute inset-0 bg-gradient-to-t from-black/80 to-transparent'></div><div class='relative'><h3 class='text-lg font-semibold text-white'>Bags</h3><p class='text-sm text-neutral-300'>9 items</p></div></a><a href='#' class='group relative flex aspect-square flex-col justify-end overflow-hidden rounded-3xl bg-black p-6'><img src='https://images.unsplash.com/photo-1612367980327-7454a7276aa7?auto=format&fit=crop&w=600&q=75' alt='A spiral notebook on a wooden desk' loading='lazy' class='absolute inset-0 h-full w-full object-cover grayscale transition duration-300 group-hover:scale-105'><div class='absolute inset-0 bg-gradient-to-t from-black/80 to-transparent'></div><div class='relative'><h3 class='text-lg font-semibold text-white'>Stationery</h3><p class='text-sm text-neutral-300'>31 items</p></div></a></div></div></section>

<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-4xl px-6 py-20'><h2 class='text-3xl font-semibold tracking-tight text-black'>Best sellers</h2><ul class='mt-8 divide-y divide-neutral-200 border-y border-neutral-200'><li class='flex flex-wrap items-center gap-5 py-6'><div class='h-24 w-24 shrink-0 rounded-2xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1551380701-5dd33d5b5d06?auto=format&fit=crop&w=300&q=75' alt='A desk lamp glowing on a dark cabinet' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='min-w-0 flex-1'><h3 class='font-semibold text-black'>Desk Lamp</h3><p class='mt-1 text-sm text-neutral-600'>A warm adjustable light with a weighted base.</p></div><p class='font-medium text-black'>$48</p><button type='button' class='rounded-lg bg-black px-4 py-2 text-sm font-medium text-white'>Add</button></li><li class='flex flex-wrap items-center gap-5 py-6'><div class='h-24 w-24 shrink-0 rounded-2xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1471107340929-a87cd0f5b5f3?auto=format&fit=crop&w=300&q=75' alt='A fountain pen on a ruled notebook' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='min-w-0 flex-1'><h3 class='font-semibold text-black'>Notebook</h3><p class='mt-1 text-sm text-neutral-600'>Dot grid pages, lay-flat binding.</p></div><p class='font-medium text-black'>$14</p><button type='button' class='rounded-lg bg-black px-4 py-2 text-sm font-medium text-white'>Add</button></li></ul></div></section>

<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 grid max-w-6xl gap-8 px-6 py-24 lg:grid-cols-[1.3fr_1fr]'><div class='relative overflow-hidden rounded-3xl bg-neutral-100 p-8'><img src='https://images.unsplash.com/photo-1618366712010-f4ae9c647dcb?auto=format&fit=crop&w=1000&q=75' alt='Black wireless headphones' loading='lazy' class='aspect-[4/3] w-full rounded-2xl object-cover grayscale'><div class='mt-6 flex items-end justify-between gap-4'><div><p class='text-xs font-medium uppercase tracking-widest text-neutral-500'>Featured</p><h2 class='mt-1 text-2xl font-semibold text-black'>Studio Headphones</h2></div><a href='#' class='rounded-full bg-black px-5 py-2.5 text-sm font-semibold text-white'>Buy $129</a></div></div><ul class='divide-y divide-neutral-200 border-y border-neutral-200'><li class='flex items-center gap-4 py-5'><div class='h-16 w-16 rounded-xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1582978571763-2d039e56f0c3?auto=format&fit=crop&w=200&q=75' alt='A small white speaker on a wooden table' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='flex-1'><h3 class='text-sm font-semibold text-black'>Desk Speaker</h3><p class='text-sm text-neutral-500'>$79</p></div></li><li class='flex items-center gap-4 py-5'><div class='h-16 w-16 rounded-xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1760348213270-7cd00b8c3405?auto=format&fit=crop&w=200&q=75' alt='A cable organizer holding a white cable' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='flex-1'><h3 class='text-sm font-semibold text-black'>Cable Tray</h3><p class='text-sm text-neutral-500'>$24</p></div></li><li class='flex items-center gap-4 py-5'><div class='h-16 w-16 rounded-xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1702561667800-2c49b0182229?auto=format&fit=crop&w=200&q=75' alt='A hand on a desk mat beside a keyboard' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='flex-1'><h3 class='text-sm font-semibold text-black'>Desk Mat</h3><p class='text-sm text-neutral-500'>$36</p></div></li></ul></div></section>

<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-3xl font-semibold tracking-tight text-white'>New arrivals</h2><div class='mt-10 grid gap-6 md:grid-cols-3'><a href='#' class='group'><div class='aspect-[4/5] rounded-3xl bg-neutral-900 transition group-hover:bg-neutral-800 overflow-hidden'><img src='https://images.unsplash.com/photo-1618366712010-f4ae9c647dcb?auto=format&fit=crop&w=800&q=75' alt='Black wireless headphones' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='mt-4 flex justify-between'><h3 class='font-semibold text-white'>Studio Headphones</h3><p class='text-neutral-300'>$129</p></div></a><a href='#' class='group'><div class='aspect-[4/5] rounded-3xl bg-neutral-900 transition group-hover:bg-neutral-800 overflow-hidden'><img src='https://images.unsplash.com/photo-1618384887929-16ec33fab9ef?auto=format&fit=crop&w=800&q=75' alt='A compact mechanical keyboard on marble' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='mt-4 flex justify-between'><h3 class='font-semibold text-white'>Mechanical Keyboard</h3><p class='text-neutral-300'>$99</p></div></a><a href='#' class='group'><div class='aspect-[4/5] rounded-3xl bg-neutral-900 transition group-hover:bg-neutral-800 overflow-hidden'><img src='https://images.unsplash.com/photo-1608043152269-423dbba4e7e1?auto=format&fit=crop&w=800&q=75' alt='A black portable speaker on a wooden table' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='mt-4 flex justify-between'><h3 class='font-semibold text-white'>Desk Speaker</h3><p class='text-neutral-300'>$79</p></div></a></div></div></section>

<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 grid max-w-6xl gap-10 px-6 py-20 md:grid-cols-[220px_1fr]'><aside class='space-y-8 text-sm'><div><h3 class='font-semibold text-black'>Category</h3><ul class='mt-3 space-y-2 text-neutral-600'><li><label class='flex items-center gap-2'><input type='checkbox' checked class='accent-black'>Desk</label></li><li><label class='flex items-center gap-2'><input type='checkbox' class='accent-black'>Bags</label></li><li><label class='flex items-center gap-2'><input type='checkbox' class='accent-black'>Stationery</label></li></ul></div><div><h3 class='font-semibold text-black'>Price</h3><ul class='mt-3 space-y-2 text-neutral-600'><li><label class='flex items-center gap-2'><input type='checkbox' class='accent-black'>Under $25</label></li><li><label class='flex items-center gap-2'><input type='checkbox' class='accent-black'>$25 to $50</label></li></ul></div></aside><div class='grid gap-6 sm:grid-cols-2 lg:grid-cols-3'><a href='#' class='block'><div class='aspect-square rounded-2xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1551380701-5dd33d5b5d06?auto=format&fit=crop&w=600&q=75' alt='A desk lamp glowing on a dark cabinet' loading='lazy' class='h-full w-full object-cover grayscale'></div><h3 class='mt-3 text-sm font-semibold text-black'>Desk Lamp</h3><p class='text-sm text-neutral-500'>$48</p></a><a href='#' class='block'><div class='aspect-square rounded-2xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1650394923482-a0d03ffb2512?auto=format&fit=crop&w=600&q=75' alt='A black desk mat with a keyboard and mouse' loading='lazy' class='h-full w-full object-cover grayscale'></div><h3 class='mt-3 text-sm font-semibold text-black'>Desk Mat</h3><p class='text-sm text-neutral-500'>$36</p></a><a href='#' class='block'><div class='aspect-square rounded-2xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1760348213270-7cd00b8c3405?auto=format&fit=crop&w=600&q=75' alt='A cable organizer holding a white cable' loading='lazy' class='h-full w-full object-cover grayscale'></div><h3 class='mt-3 text-sm font-semibold text-black'>Cable Tray</h3><p class='text-sm text-neutral-500'>$24</p></a></div></div></section>

<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-3'><article class='group'><div class='relative aspect-[4/5] overflow-hidden rounded-3xl bg-neutral-100'><img src='https://images.unsplash.com/photo-1548863227-3af567fc3b27?auto=format&fit=crop&w=700&q=75' alt='A white tote bag on a brick wall' loading='lazy' class='h-full w-full object-cover grayscale'><button type='button' class='absolute inset-x-4 bottom-4 translate-y-4 rounded-xl bg-black py-3 text-sm font-semibold text-white opacity-0 transition group-hover:translate-y-0 group-hover:opacity-100'>Add to cart</button></div><div class='mt-4 flex items-baseline justify-between'><h3 class='font-semibold text-black'>Canvas Tote</h3><p class='text-black'>$32</p></div><p class='text-sm text-neutral-500'>Natural cotton</p></article><article class='group'><div class='relative aspect-[4/5] overflow-hidden rounded-3xl bg-neutral-100'><img src='https://images.unsplash.com/photo-1544003484-3cd181d17917?auto=format&fit=crop&w=700&q=75' alt='A grey stainless steel bottle' loading='lazy' class='h-full w-full object-cover grayscale'><button type='button' class='absolute inset-x-4 bottom-4 translate-y-4 rounded-xl bg-black py-3 text-sm font-semibold text-white opacity-0 transition group-hover:translate-y-0 group-hover:opacity-100'>Add to cart</button></div><div class='mt-4 flex items-baseline justify-between'><h3 class='font-semibold text-black'>Steel Bottle</h3><p class='text-black'>$28</p></div><p class='text-sm text-neutral-500'>Black, 600 ml</p></article><article class='group'><div class='relative aspect-[4/5] overflow-hidden rounded-3xl bg-neutral-100'><img src='https://images.unsplash.com/photo-1656941599882-808d7b04b86a?auto=format&fit=crop&w=700&q=75' alt='Pens on an open notebook' loading='lazy' class='h-full w-full object-cover grayscale'><button type='button' class='absolute inset-x-4 bottom-4 translate-y-4 rounded-xl bg-black py-3 text-sm font-semibold text-white opacity-0 transition group-hover:translate-y-0 group-hover:opacity-100'>Add to cart</button></div><div class='mt-4 flex items-baseline justify-between'><h3 class='font-semibold text-black'>Pen Set</h3><p class='text-black'>$22</p></div><p class='text-sm text-neutral-500'>Pack of three</p></article></div></div></section>

<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-3xl font-semibold tracking-tight text-black'>Shop the collection</h2><div class='mt-10 grid gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-4'><a href='#' class='group'><div class='aspect-square rounded-2xl bg-neutral-100 transition group-hover:bg-neutral-200 overflow-hidden'><img src='https://images.unsplash.com/photo-1551380701-5dd33d5b5d06?auto=format&fit=crop&w=600&q=75' alt='A desk lamp glowing on a dark cabinet' loading='lazy' class='h-full w-full object-cover grayscale'></div><h3 class='mt-4 text-sm font-semibold text-black'>Desk Lamp</h3><p class='mt-1 text-sm text-neutral-500'>Matte black</p><p class='mt-2 text-sm font-medium text-black'>$48</p></a><a href='#' class='group'><div class='aspect-square rounded-2xl bg-neutral-100 transition group-hover:bg-neutral-200 overflow-hidden'><img src='https://images.unsplash.com/photo-1612367980327-7454a7276aa7?auto=format&fit=crop&w=600&q=75' alt='A spiral notebook on a wooden desk' loading='lazy' class='h-full w-full object-cover grayscale'></div><h3 class='mt-4 text-sm font-semibold text-black'>Notebook</h3><p class='mt-1 text-sm text-neutral-500'>Dot grid, A5</p><p class='mt-2 text-sm font-medium text-black'>$14</p></a><a href='#' class='group'><div class='aspect-square rounded-2xl bg-neutral-100 transition group-hover:bg-neutral-200 overflow-hidden'><img src='https://images.unsplash.com/photo-1616241673111-508b4662c707?auto=format&fit=crop&w=600&q=75' alt='A white ceramic mug on a windowsill' loading='lazy' class='h-full w-full object-cover grayscale'></div><h3 class='mt-4 text-sm font-semibold text-black'>Ceramic Mug</h3><p class='mt-1 text-sm text-neutral-500'>White, 350 ml</p><p class='mt-2 text-sm font-medium text-black'>$18</p></a><a href='#' class='group'><div class='aspect-square rounded-2xl bg-neutral-100 transition group-hover:bg-neutral-200 overflow-hidden'><img src='https://images.unsplash.com/photo-1702561667800-2c49b0182229?auto=format&fit=crop&w=600&q=75' alt='A hand on a desk mat beside a keyboard' loading='lazy' class='h-full w-full object-cover grayscale'></div><h3 class='mt-4 text-sm font-semibold text-black'>Desk Mat</h3><p class='mt-1 text-sm text-neutral-500'>Charcoal felt</p><p class='mt-2 text-sm font-medium text-black'>$36</p></a></div></div></section>