Clients Sections

Clients Sections 10 · Case study links

A list of placeholder client names, each a row with a short result and an arrow to a case study. Sample content.

<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-3xl px-6 py-24'><h2 class='text-4xl font-semibold tracking-tight text-black'>Customer stories</h2><div class='mt-10 divide-y divide-neutral-200 border-y border-neutral-200'><a href='#' class='flex items-center justify-between gap-4 py-6 hover:bg-neutral-50'><div><p class='text-lg font-semibold text-black'>Northwind</p><p class='mt-1 text-sm text-neutral-600'>Shipped a new landing page in two days.</p></div><span class='text-xl text-neutral-400'>→</span></a><a href='#' class='flex items-center justify-between gap-4 py-6 hover:bg-neutral-50'><div><p class='text-lg font-semibold text-black'>Acme</p><p class='mt-1 text-sm text-neutral-600'>Moved design and code into one workflow.</p></div><span class='text-xl text-neutral-400'>→</span></a><a href='#' class='flex items-center justify-between gap-4 py-6 hover:bg-neutral-50'><div><p class='text-lg font-semibold text-black'>Globex</p><p class='mt-1 text-sm text-neutral-600'>Handed clients clean HTML, not mockups.</p></div><span class='text-xl text-neutral-400'>→</span></a></div><p class='mt-4 text-xs text-neutral-400'>Placeholder names and results.</p></div></section>

Clients Sections 09 · Two rows, two sizes

Two rows of placeholder names: larger names on top and smaller ones below. Sample names.

<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 text-center'><div class='flex flex-wrap items-center justify-center gap-x-14 gap-y-6 text-4xl font-semibold tracking-tight text-black'><span>Northwind</span><span>Acme</span><span>Globex</span></div><div class='mt-10 flex flex-wrap items-center justify-center gap-x-10 gap-y-4 text-xl font-semibold text-neutral-300'><span>Initech</span><span>Soylent</span><span>Hooli</span><span>Wayne</span><span>Stark &amp; Co</span></div></div></section>

Clients Sections 08 · Count with avatars

A line like 'Trusted by 1,000+ teams' with overlapping avatars and a row of names. Sample numbers.

<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-3xl px-6 py-20 text-center'><div class='flex justify-center -space-x-3'><span class='grid h-12 w-12 place-items-center rounded-full border-2 border-white bg-black text-xs font-semibold text-white'>N</span><span class='grid h-12 w-12 place-items-center rounded-full border-2 border-white bg-neutral-700 text-xs font-semibold text-white'>A</span><span class='grid h-12 w-12 place-items-center rounded-full border-2 border-white bg-neutral-500 text-xs font-semibold text-white'>G</span><span class='grid h-12 w-12 place-items-center rounded-full border-2 border-white bg-neutral-300 text-xs font-semibold text-black'>I</span></div><h2 class='mt-6 text-3xl font-semibold tracking-tight text-black'>Trusted by 1,000+ teams</h2><p class='mt-2 text-sm text-neutral-500'>Sample number: replace with yours.</p><div class='mt-8 flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-lg font-semibold text-neutral-300'><span>Northwind</span><span>Acme</span><span>Globex</span><span>Initech</span></div></div></section>

Clients Sections 07 · Quote with names

A centered quote followed by a row of placeholder client names. Sample copy.

<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-24 text-center'><p class='text-2xl font-medium leading-snug text-black md:text-3xl'>“Our designers and developers finally work in the same file.”</p><p class='mt-4 text-sm text-neutral-500'>Sample Person, Head of Design</p><div class='mt-12 flex flex-wrap items-center justify-center gap-x-10 gap-y-4 border-t border-neutral-200 pt-10 text-xl font-semibold text-neutral-300'><span>Northwind</span><span>Acme</span><span>Globex</span><span>Initech</span></div></div></section>

Clients Sections 06 · Cards with descriptors

Three cards, each with a placeholder company name, an industry line and a result line. Sample content.

<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-neutral-50'><div class='mx-auto max-w-6xl px-6 py-24'><h2 class='text-center text-4xl font-semibold tracking-tight text-black'>Who uses it</h2><div class='mt-14 grid gap-6 md:grid-cols-3'><div class='rounded-2xl border border-neutral-200 bg-white p-8'><p class='text-xl font-semibold text-black'>Northwind</p><p class='mt-1 text-sm text-neutral-500'>Food delivery</p><p class='mt-5 text-sm text-neutral-600'>Rebuilt its marketing pages in a week.</p></div><div class='rounded-2xl border border-neutral-200 bg-white p-8'><p class='text-xl font-semibold text-black'>Acme</p><p class='mt-1 text-sm text-neutral-500'>Software</p><p class='mt-5 text-sm text-neutral-600'>Designers and developers share one file.</p></div><div class='rounded-2xl border border-neutral-200 bg-white p-8'><p class='text-xl font-semibold text-black'>Globex</p><p class='mt-1 text-sm text-neutral-500'>Agency</p><p class='mt-5 text-sm text-neutral-600'>Hands clean HTML to clients.</p></div></div></div></section>

Clients Sections 05 · Heading beside names

A heading and short paragraph on the left, a two-column list of placeholder names on the right. Sample names.

<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 items-center gap-12 px-6 py-24 md:grid-cols-[1fr_1.2fr]'><div><h2 class='text-4xl font-semibold tracking-tight text-black'>Teams ship faster with us</h2><p class='mt-4 text-lg text-neutral-600'>From small studios to large companies. Sample names shown.</p></div><div class='grid grid-cols-2 gap-px overflow-hidden rounded-2xl border border-neutral-200 bg-neutral-200'><div class='grid h-24 place-items-center bg-white text-lg font-semibold text-neutral-400'>Northwind</div><div class='grid h-24 place-items-center bg-white text-lg font-semibold text-neutral-400'>Acme</div><div class='grid h-24 place-items-center bg-white text-lg font-semibold text-neutral-400'>Globex</div><div class='grid h-24 place-items-center bg-white text-lg font-semibold text-neutral-400'>Initech</div></div></div></section>

Clients Sections 04 · Fading marquee look

A long single row of names that fades out at both edges, drawn as a static marquee. Sample names.

<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='overflow-hidden bg-white py-16'><p class='text-center text-sm font-medium text-neutral-500'>Trusted by fast-moving teams</p><div class='relative mt-8'><div class='pointer-events-none absolute inset-y-0 left-0 z-10 w-32 bg-gradient-to-r from-white to-transparent'></div><div class='pointer-events-none absolute inset-y-0 right-0 z-10 w-32 bg-gradient-to-l from-white to-transparent'></div><div class='flex items-center justify-center gap-14 whitespace-nowrap text-3xl font-semibold tracking-tight text-neutral-300'><span>Northwind</span><span>Acme</span><span>Globex</span><span>Initech</span><span>Soylent</span><span>Hooli</span><span>Stark &amp; Co</span><span>Wayne</span></div></div></section>

Clients Sections 03 · Dark row

A black band with a small heading and a row of placeholder names in grey. Sample names.

<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-16 text-center'><p class='text-xs uppercase tracking-widest text-neutral-500'>Used by teams at</p><div class='mt-8 flex flex-wrap items-center justify-center gap-x-12 gap-y-5 text-2xl font-semibold tracking-tight text-neutral-600'><span>Northwind</span><span>Acme</span><span>Globex</span><span>Initech</span><span>Soylent</span></div></div></section>

Clients Sections 02 · Bordered tiles

A 3 by 2 grid of bordered tiles, each with a placeholder company name centered. Sample names.

<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'><h2 class='text-center text-3xl font-semibold tracking-tight text-black'>Our clients</h2><div class='mt-12 grid grid-cols-2 overflow-hidden rounded-3xl border border-neutral-200 md:grid-cols-3'><div class='grid h-28 place-items-center border-b border-r border-neutral-200 text-xl font-semibold text-neutral-400'>Northwind</div><div class='grid h-28 place-items-center border-b border-neutral-200 text-xl font-semibold text-neutral-400 md:border-r'>Acme</div><div class='grid h-28 place-items-center border-b border-r border-neutral-200 text-xl font-semibold text-neutral-400 md:border-r-0'>Globex</div><div class='grid h-28 place-items-center border-b border-neutral-200 text-xl font-semibold text-neutral-400 md:border-b-0 md:border-r'>Initech</div><div class='grid h-28 place-items-center border-r border-neutral-200 text-xl font-semibold text-neutral-400'>Soylent</div><div class='grid h-28 place-items-center text-xl font-semibold text-neutral-400'>Hooli</div></div></div></section>

Clients Sections 01 · Simple row

A heading line and one row of five placeholder company names in grey. Sample names.

<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 text-center'><p class='text-sm font-medium text-neutral-500'>Trusted by teams at</p><div class='mt-8 flex flex-wrap items-center justify-center gap-x-12 gap-y-6 text-2xl font-semibold tracking-tight text-neutral-300'><span>Northwind</span><span>Acme</span><span>Globex</span><span>Initech</span><span>Stark &amp; Co</span></div><p class='mt-8 text-xs text-neutral-400'>Placeholder names: replace with your clients.</p></div></section>