Card Sections

Card Sections 10 · Cards ending with a CTA card

Two white cards followed by a black call-to-action card with a button.

<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 md:grid-cols-3'><div class='rounded-2xl border border-neutral-200 p-8'><h3 class='font-semibold text-black'>Free</h3><p class='mt-2 text-sm text-neutral-600'>Try the editor with three projects.</p></div><div class='rounded-2xl border border-neutral-200 p-8'><h3 class='font-semibold text-black'>Pro</h3><p class='mt-2 text-sm text-neutral-600'>Unlimited projects and animations.</p></div><div class='flex flex-col justify-between rounded-2xl bg-black p-8'><h3 class='font-semibold text-white'>Ready to start?</h3><a href='#' class='mt-6 rounded-lg bg-white py-2.5 text-center text-sm font-semibold text-black'>Open the editor</a></div></div></div></section>

Card Sections 09 · Profile cards

Small centered cards with an initials avatar, a name, a role and a follow button. Sample people.

<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-5xl px-6 py-24'><div class='grid gap-4 sm:grid-cols-3'><div class='rounded-2xl border border-neutral-200 bg-white p-6 text-center'><span class='mx-auto grid h-16 w-16 place-items-center rounded-full bg-black text-lg font-semibold text-white'>AM</span><h3 class='mt-4 font-semibold text-black'>Alex Morgan</h3><p class='text-sm text-neutral-500'>Developer</p><button type='button' class='mt-4 w-full rounded-lg border border-black py-2 text-sm font-medium text-black hover:bg-black hover:text-white'>Follow</button></div><div class='rounded-2xl border border-neutral-200 bg-white p-6 text-center'><span class='mx-auto grid h-16 w-16 place-items-center rounded-full bg-neutral-700 text-lg font-semibold text-white'>SR</span><h3 class='mt-4 font-semibold text-black'>Sam Rivera</h3><p class='text-sm text-neutral-500'>Designer</p><button type='button' class='mt-4 w-full rounded-lg border border-black py-2 text-sm font-medium text-black hover:bg-black hover:text-white'>Follow</button></div><div class='rounded-2xl border border-neutral-200 bg-white p-6 text-center'><span class='mx-auto grid h-16 w-16 place-items-center rounded-full bg-neutral-500 text-lg font-semibold text-white'>JL</span><h3 class='mt-4 font-semibold text-black'>Jordan Lee</h3><p class='text-sm text-neutral-500'>Founder</p><button type='button' class='mt-4 w-full rounded-lg border border-black py-2 text-sm font-medium text-black hover:bg-black hover:text-white'>Follow</button></div></div></div></section>

Card Sections 08 · Cards with a number

Four cards, each led by a large number and a label, with one sentence below. 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-6xl px-6 py-24'><div class='grid gap-4 sm:grid-cols-2 lg:grid-cols-4'><div class='rounded-2xl border border-neutral-200 p-6'><p class='text-4xl font-semibold text-black'>12k</p><h3 class='mt-3 font-semibold text-black'>Pages</h3><p class='mt-1 text-sm text-neutral-600'>Designed so far.</p></div><div class='rounded-2xl border border-neutral-200 p-6'><p class='text-4xl font-semibold text-black'>3.4k</p><h3 class='mt-3 font-semibold text-black'>Projects</h3><p class='mt-1 text-sm text-neutral-600'>Created by users.</p></div><div class='rounded-2xl border border-neutral-200 p-6'><p class='text-4xl font-semibold text-black'>9k</p><h3 class='mt-3 font-semibold text-black'>Animations</h3><p class='mt-1 text-sm text-neutral-600'>Added to pages.</p></div><div class='rounded-2xl bg-black p-6'><p class='text-4xl font-semibold text-white'>0</p><h3 class='mt-3 font-semibold text-white'>Export steps</h3><p class='mt-1 text-sm text-neutral-400'>Copy the HTML.</p></div></div></div></section>

Card Sections 07 · Lift on hover

Three cards that rise slightly and gain a shadow when hovered.

<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'><div class='grid gap-6 md:grid-cols-3'><a href='#' class='rounded-2xl bg-white p-8 ring-1 ring-neutral-200 transition duration-200 hover:-translate-y-1 hover:shadow-xl'><span class='grid h-10 w-10 place-items-center rounded-lg bg-black text-white'>▢</span><h3 class='mt-5 font-semibold text-black'>Canvas</h3><p class='mt-2 text-sm text-neutral-600'>Draw and arrange.</p></a><a href='#' class='rounded-2xl bg-white p-8 ring-1 ring-neutral-200 transition duration-200 hover:-translate-y-1 hover:shadow-xl'><span class='grid h-10 w-10 place-items-center rounded-lg bg-black font-mono text-sm text-white'>{ }</span><h3 class='mt-5 font-semibold text-black'>Code</h3><p class='mt-2 text-sm text-neutral-600'>Plain HTML and Tailwind.</p></a><a href='#' class='rounded-2xl bg-white p-8 ring-1 ring-neutral-200 transition duration-200 hover:-translate-y-1 hover:shadow-xl'><span class='grid h-10 w-10 place-items-center rounded-lg bg-black text-white'>↻</span><h3 class='mt-5 font-semibold text-black'>Motion</h3><p class='mt-2 text-sm text-neutral-600'>Animations without scripts.</p></a></div></div></section>

Card Sections 06 · Feature card and two small

A large feature card with a photo behind its title, beside two smaller cards.

<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-4 px-6 py-24 md:grid-cols-2'><div class='relative flex min-h-[360px] flex-col justify-end overflow-hidden rounded-3xl bg-black p-8'><img src='https://images.unsplash.com/photo-1487523117656-d5d117ad47c5?auto=format&fit=crop&w=1000&q=75' alt='Two monitors on a wooden desk' loading='lazy' class='absolute inset-0 h-full w-full object-cover grayscale'><div class='absolute inset-0 bg-gradient-to-t from-black via-black/50 to-black/10'></div><div class='relative'><h3 class='text-2xl font-semibold text-white'>Everything in one editor</h3><p class='mt-2 text-neutral-300'>Canvas, code, config and preview side by side.</p></div></div><div class='grid gap-4'><div class='rounded-3xl border border-neutral-200 p-8'><h3 class='font-semibold text-black'>Figma plugin</h3><p class='mt-2 text-sm text-neutral-600'>Bring frames in as HTML.</p></div><div class='rounded-3xl border border-neutral-200 p-8'><h3 class='font-semibold text-black'>MCP server</h3><p class='mt-2 text-sm text-neutral-600'>Let AI tools read your library.</p></div></div></div></section>

Card Sections 05 · Cards with badge and meta

Cards with a small outlined badge, a title, a short note and a meta line at the bottom. 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-6xl px-6 py-24'><div class='grid gap-6 md:grid-cols-3'><article class='flex flex-col rounded-2xl border border-neutral-200 p-6'><span class='w-fit rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs text-neutral-600'>Guide</span><h3 class='mt-4 font-semibold text-black'>Change a class by clicking</h3><p class='mt-2 flex-1 text-sm text-neutral-600'>How the panel maps to Tailwind.</p><p class='mt-6 border-t border-neutral-100 pt-4 text-xs text-neutral-400'>6 min read · 12 Nov</p></article><article class='flex flex-col rounded-2xl border border-neutral-200 p-6'><span class='w-fit rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs text-neutral-600'>Tutorial</span><h3 class='mt-4 font-semibold text-black'>Build a menu without JS</h3><p class='mt-2 flex-1 text-sm text-neutral-600'>One interaction rule, one menu.</p><p class='mt-6 border-t border-neutral-100 pt-4 text-xs text-neutral-400'>4 min read · 5 Nov</p></article><article class='flex flex-col rounded-2xl border border-neutral-200 p-6'><span class='w-fit rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs text-neutral-600'>Tips</span><h3 class='mt-4 font-semibold text-black'>Your config, live</h3><p class='mt-2 flex-1 text-sm text-neutral-600'>Edit the Tailwind config beside the page.</p><p class='mt-6 border-t border-neutral-100 pt-4 text-xs text-neutral-400'>3 min read · 28 Oct</p></article></div></div></section>

Card Sections 04 · Horizontal cards

Wide cards with an image block on the left and text on the right, stacked in one column.

<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'><div class='space-y-4'><article class='flex flex-col gap-5 rounded-2xl border border-neutral-200 p-4 sm:flex-row sm:items-center'><div class='h-32 rounded-xl bg-neutral-100 sm:w-48 sm:shrink-0 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><h3 class='font-semibold text-black'>Interactions</h3><p class='mt-1 text-sm text-neutral-600'>Menus and modals from a single rule.</p></div></article><article class='flex flex-col gap-5 rounded-2xl border border-neutral-200 p-4 sm:flex-row sm:items-center'><div class='h-32 rounded-xl bg-neutral-200 sm:w-48 sm:shrink-0 overflow-hidden'><img src='https://images.unsplash.com/photo-1453928582365-b6ad33cbcf64?auto=format&fit=crop&w=500&q=75' alt='A laptop on a light wooden desk' loading='lazy' class='h-full w-full object-cover grayscale'></div><div><h3 class='font-semibold text-black'>Animations</h3><p class='mt-1 text-sm text-neutral-600'>Entrances, loops and hover effects.</p></div></article></div></div></section>

Card Sections 03 · Dark cards

Black section with three dark bordered cards and white text.

<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'><div class='grid gap-4 md:grid-cols-3'><div class='rounded-2xl border border-neutral-800 bg-neutral-950 p-8'><p class='font-mono text-xs text-neutral-500'>01</p><h3 class='mt-6 text-lg font-semibold text-white'>Draw</h3><p class='mt-2 text-sm text-neutral-400'>Start on a blank canvas.</p></div><div class='rounded-2xl border border-neutral-800 bg-neutral-950 p-8'><p class='font-mono text-xs text-neutral-500'>02</p><h3 class='mt-6 text-lg font-semibold text-white'>Edit</h3><p class='mt-2 text-sm text-neutral-400'>Change anything visually.</p></div><div class='rounded-2xl border border-neutral-800 bg-neutral-950 p-8'><p class='font-mono text-xs text-neutral-500'>03</p><h3 class='mt-6 text-lg font-semibold text-white'>Ship</h3><p class='mt-2 text-sm text-neutral-400'>Copy the HTML.</p></div></div></div></section>

Card Sections 02 · Cards with image

Three cards with a grey image block on top, then a title, text and a link. 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-neutral-50'><div class='mx-auto max-w-6xl px-6 py-24'><div class='grid gap-6 md:grid-cols-3'><article class='overflow-hidden rounded-2xl border border-neutral-200 bg-white'><div class='aspect-[16/10] bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1637502875124-eb4a9843a2fa?auto=format&fit=crop&w=800&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='p-6'><h3 class='font-semibold text-black'>Landing pages</h3><p class='mt-2 text-sm text-neutral-600'>Heroes, features and pricing, ready to edit.</p><a href='#' class='mt-4 inline-block text-sm font-medium text-black underline underline-offset-4'>Browse</a></div></article><article class='overflow-hidden rounded-2xl border border-neutral-200 bg-white'><div class='aspect-[16/10] bg-neutral-200 overflow-hidden'><img src='https://images.unsplash.com/photo-1486486955648-a4f22566c598?auto=format&fit=crop&w=800&q=75' alt='A desk with a monitor and keyboard' loading='lazy' class='h-full w-full object-cover grayscale'></div><div class='p-6'><h3 class='font-semibold text-black'>App screens</h3><p class='mt-2 text-sm text-neutral-600'>Dashboards, tables and forms.</p><a href='#' class='mt-4 inline-block text-sm font-medium text-black underline underline-offset-4'>Browse</a></div></article><article class='overflow-hidden rounded-2xl border border-neutral-200 bg-white'><div class='aspect-[16/10] bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1497032628192-86f99bcd76bc?auto=format&fit=crop&w=800&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='p-6'><h3 class='font-semibold text-black'>Email and blog</h3><p class='mt-2 text-sm text-neutral-600'>Posts and newsletters.</p><a href='#' class='mt-4 inline-block text-sm font-medium text-black underline underline-offset-4'>Browse</a></div></article></div></div></section>

Card Sections 01 · Three plain cards

Three bordered cards, each with a title, a sentence and a link.

<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'>Start here</h2><div class='mt-12 grid gap-6 md:grid-cols-3'><a href='#' class='group rounded-2xl border border-neutral-200 p-8 transition hover:border-black'><h3 class='text-lg font-semibold text-black'>Quick start</h3><p class='mt-2 text-sm text-neutral-600'>Make your first page in five minutes.</p><span class='mt-6 inline-block text-sm font-medium text-black'>Read →</span></a><a href='#' class='group rounded-2xl border border-neutral-200 p-8 transition hover:border-black'><h3 class='text-lg font-semibold text-black'>Code panel</h3><p class='mt-2 text-sm text-neutral-600'>See and edit the classes you changed.</p><span class='mt-6 inline-block text-sm font-medium text-black'>Read →</span></a><a href='#' class='group rounded-2xl border border-neutral-200 p-8 transition hover:border-black'><h3 class='text-lg font-semibold text-black'>Config</h3><p class='mt-2 text-sm text-neutral-600'>Use your own Tailwind setup.</p><span class='mt-6 inline-block text-sm font-medium text-black'>Read →</span></a></div></div></section>