Icon Sections

<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'><a href='#' class='group rounded-3xl bg-neutral-100 p-8 transition hover:bg-black'><span class='text-3xl text-black transition group-hover:text-white'>▢</span><h3 class='mt-10 text-lg font-semibold text-black transition group-hover:text-white'>Canvas</h3><p class='mt-2 text-sm text-neutral-600 transition group-hover:text-neutral-400'>Draw and arrange freely.</p></a><a href='#' class='group rounded-3xl bg-neutral-100 p-8 transition hover:bg-black'><span class='font-mono text-3xl text-black transition group-hover:text-white'>{ }</span><h3 class='mt-10 text-lg font-semibold text-black transition group-hover:text-white'>Code</h3><p class='mt-2 text-sm text-neutral-600 transition group-hover:text-neutral-400'>Plain HTML and Tailwind.</p></a><a href='#' class='group rounded-3xl bg-neutral-100 p-8 transition hover:bg-black'><span class='text-3xl text-black transition group-hover:text-white'>↻</span><h3 class='mt-10 text-lg font-semibold text-black transition group-hover:text-white'>Motion</h3><p class='mt-2 text-sm text-neutral-600 transition group-hover:text-neutral-400'>Animations without scripts.</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-5xl px-6 py-24'><h2 class='text-center text-4xl font-semibold tracking-tight text-black'>Three steps</h2><div class='relative mt-16 grid gap-10 md:grid-cols-3'><div class='absolute left-[16%] right-[16%] top-6 hidden h-px bg-neutral-200 md:block'></div><div class='relative text-center'><span class='mx-auto grid h-12 w-12 place-items-center rounded-full bg-black font-semibold text-white'>1</span><h3 class='mt-5 font-semibold text-black'>Start</h3><p class='mt-2 text-sm text-neutral-600'>Draw or paste a page.</p></div><div class='relative text-center'><span class='mx-auto grid h-12 w-12 place-items-center rounded-full bg-black font-semibold text-white'>2</span><h3 class='mt-5 font-semibold text-black'>Edit</h3><p class='mt-2 text-sm text-neutral-600'>Change it from the panel.</p></div><div class='relative text-center'><span class='mx-auto grid h-12 w-12 place-items-center rounded-full bg-black font-semibold text-white'>3</span><h3 class='mt-5 font-semibold text-black'>Ship</h3><p class='mt-2 text-sm text-neutral-600'>Copy the HTML.</p></div></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-neutral-50'><div class='mx-auto max-w-6xl px-6 py-24'><div class='grid gap-10 md:grid-cols-3'><div><span class='grid h-11 w-11 place-items-center rounded-xl bg-black text-white'>▢</span><h3 class='mt-5 text-lg font-semibold text-black'>Editor</h3><p class='mt-2 text-neutral-600'>Design on a canvas and keep the code.</p><a href='#' class='mt-4 inline-block text-sm font-medium text-black underline underline-offset-4'>Learn more →</a></div><div><span class='grid h-11 w-11 place-items-center rounded-xl bg-black font-mono text-sm text-white'>{ }</span><h3 class='mt-5 text-lg font-semibold text-black'>Code panel</h3><p class='mt-2 text-neutral-600'>Edit HTML, CSS, JS and config.</p><a href='#' class='mt-4 inline-block text-sm font-medium text-black underline underline-offset-4'>Learn more →</a></div><div><span class='grid h-11 w-11 place-items-center rounded-xl bg-black text-white'>✦</span><h3 class='mt-5 text-lg font-semibold text-black'>Plugins</h3><p class='mt-2 text-neutral-600'>Bring in Figma frames, let AI help.</p><a href='#' class='mt-4 inline-block text-sm font-medium text-black underline underline-offset-4'>Learn more →</a></div></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-3xl px-6 py-24 text-center'><h2 class='text-3xl font-semibold tracking-tight text-black'>Works with the tools you use</h2><div class='mt-10 flex flex-wrap justify-center gap-3'><span class='inline-flex items-center gap-2 rounded-full border border-neutral-300 px-4 py-2 text-sm text-black'><span>▢</span>Figma</span><span class='inline-flex items-center gap-2 rounded-full border border-neutral-300 px-4 py-2 text-sm text-black'><span>✦</span>Claude</span><span class='inline-flex items-center gap-2 rounded-full border border-neutral-300 px-4 py-2 text-sm text-black'><span>⎘</span>Cursor</span><span class='inline-flex items-center gap-2 rounded-full border border-neutral-300 px-4 py-2 text-sm text-black'><span>{ }</span>React</span><span class='inline-flex items-center gap-2 rounded-full border border-neutral-300 px-4 py-2 text-sm text-black'><span>☰</span>Tailwind</span></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-24'><div class='divide-y divide-neutral-200 border-y border-neutral-200'><div class='grid gap-6 py-10 sm:grid-cols-[120px_1fr]'><span class='grid h-20 w-20 place-items-center rounded-3xl bg-black text-3xl text-white'>▢</span><div><h3 class='text-xl font-semibold text-black'>Design on a canvas</h3><p class='mt-2 text-neutral-600'>Draw, select and edit with the tools you expect.</p></div></div><div class='grid gap-6 py-10 sm:grid-cols-[120px_1fr]'><span class='grid h-20 w-20 place-items-center rounded-3xl bg-black font-mono text-2xl text-white'>{ }</span><div><h3 class='text-xl font-semibold text-black'>Read the code</h3><p class='mt-2 text-neutral-600'>Every control maps to a Tailwind class you can see.</p></div></div><div class='grid gap-6 py-10 sm:grid-cols-[120px_1fr]'><span class='grid h-20 w-20 place-items-center rounded-3xl bg-black text-3xl text-white'>↗</span><div><h3 class='text-xl font-semibold text-black'>Ship it</h3><p class='mt-2 text-neutral-600'>Copy the HTML into your project.</p></div></div></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 overflow-hidden rounded-3xl border border-neutral-200 sm:grid-cols-2 lg:grid-cols-3'><div class='border-b border-neutral-200 p-8 lg:border-r'><span class='text-2xl text-black'>▢</span><h3 class='mt-4 font-semibold text-black'>Frames</h3><p class='mt-1 text-sm text-neutral-600'>Pages side by side.</p></div><div class='border-b border-neutral-200 p-8 lg:border-r'><span class='text-2xl text-black'>◐</span><h3 class='mt-4 font-semibold text-black'>Themes</h3><p class='mt-1 text-sm text-neutral-600'>Colours for a project.</p></div><div class='border-b border-neutral-200 p-8'><span class='text-2xl text-black'>↻</span><h3 class='mt-4 font-semibold text-black'>Motion</h3><p class='mt-1 text-sm text-neutral-600'>Animations and loops.</p></div><div class='border-b border-neutral-200 p-8 sm:border-b-0 lg:border-r'><span class='text-2xl text-black'>☰</span><h3 class='mt-4 font-semibold text-black'>Config</h3><p class='mt-1 text-sm text-neutral-600'>Your Tailwind setup.</p></div><div class='border-b border-neutral-200 p-8 sm:border-b-0 lg:border-r'><span class='text-2xl text-black'>↗</span><h3 class='mt-4 font-semibold text-black'>Preview</h3><p class='mt-1 text-sm text-neutral-600'>Click through frames.</p></div><div class='p-8'><span class='text-2xl text-black'>✦</span><h3 class='mt-4 font-semibold text-black'>MCP</h3><p class='mt-1 text-sm text-neutral-600'>For AI tools.</p></div></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-5xl px-6 py-24'><div class='grid gap-x-12 gap-y-10 md:grid-cols-2'><div class='flex gap-4'><span class='grid h-10 w-10 shrink-0 place-items-center rounded-lg bg-black text-sm text-white'>▢</span><div><h3 class='font-semibold text-black'>Draw</h3><p class='mt-1 text-sm text-neutral-600'>Rectangles, ovals and text on a canvas.</p></div></div><div class='flex gap-4'><span class='grid h-10 w-10 shrink-0 place-items-center rounded-lg bg-black text-sm text-white'>⎘</span><div><h3 class='font-semibold text-black'>Paste</h3><p class='mt-1 text-sm text-neutral-600'>Bring in a page you already have.</p></div></div><div class='flex gap-4'><span class='grid h-10 w-10 shrink-0 place-items-center rounded-lg bg-black text-sm text-white'>✎</span><div><h3 class='font-semibold text-black'>Edit</h3><p class='mt-1 text-sm text-neutral-600'>Change anything from the panel.</p></div></div><div class='flex gap-4'><span class='grid h-10 w-10 shrink-0 place-items-center rounded-lg bg-black text-sm text-white'>↗</span><div><h3 class='font-semibold text-black'>Ship</h3><p class='mt-1 text-sm text-neutral-600'>Copy the HTML. It is already code.</p></div></div></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-black'><div class='mx-auto max-w-6xl px-6 py-24'><h2 class='text-center text-4xl font-semibold tracking-tight text-white'>Why people switch</h2><div class='mt-14 grid gap-4 md:grid-cols-3'><div class='rounded-2xl border border-neutral-800 p-8'><span class='grid h-11 w-11 place-items-center rounded-xl bg-white text-black'>✓</span><h3 class='mt-5 font-semibold text-white'>Clean output</h3><p class='mt-2 text-sm text-neutral-400'>Readable classes, no generated clutter.</p></div><div class='rounded-2xl border border-neutral-800 p-8'><span class='grid h-11 w-11 place-items-center rounded-xl bg-white text-black'>⇄</span><h3 class='mt-5 font-semibold text-white'>One source</h3><p class='mt-2 text-sm text-neutral-400'>Design and code are the same file.</p></div><div class='rounded-2xl border border-neutral-800 p-8'><span class='grid h-11 w-11 place-items-center rounded-xl bg-white text-black'>⚡</span><h3 class='mt-5 font-semibold text-white'>Fast edits</h3><p class='mt-2 text-sm text-neutral-400'>Change a class by clicking.</p></div></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-12 text-center sm:grid-cols-2 lg:grid-cols-4'><div><span class='mx-auto grid h-16 w-16 place-items-center rounded-full border border-neutral-300 text-2xl text-black'>✓</span><h3 class='mt-5 font-semibold text-black'>Plain HTML</h3><p class='mt-2 text-sm text-neutral-600'>No custom format.</p></div><div><span class='mx-auto grid h-16 w-16 place-items-center rounded-full border border-neutral-300 text-2xl text-black'>↔</span><h3 class='mt-5 font-semibold text-black'>No export</h3><p class='mt-2 text-sm text-neutral-600'>What you see is shipped.</p></div><div><span class='mx-auto grid h-16 w-16 place-items-center rounded-full border border-neutral-300 text-2xl text-black'>☰</span><h3 class='mt-5 font-semibold text-black'>Your config</h3><p class='mt-2 text-sm text-neutral-600'>Tailwind v3 and v4.</p></div><div><span class='mx-auto grid h-16 w-16 place-items-center rounded-full border border-neutral-300 text-2xl text-black'>☆</span><h3 class='mt-5 font-semibold text-black'>Free to try</h3><p class='mt-2 text-sm text-neutral-600'>Open it in a browser.</p></div></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='max-w-xl text-4xl font-semibold tracking-tight text-black'>Everything you need to design in Tailwind</h2><div class='mt-14 grid gap-x-10 gap-y-12 sm:grid-cols-2 lg:grid-cols-3'><div><span class='grid h-11 w-11 place-items-center rounded-xl 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 on a free canvas.</p></div><div><span class='grid h-11 w-11 place-items-center rounded-xl bg-black font-mono text-sm text-white'>{ }</span><h3 class='mt-5 font-semibold text-black'>Code panel</h3><p class='mt-2 text-sm text-neutral-600'>HTML, CSS, JS and config in tabs.</p></div><div><span class='grid h-11 w-11 place-items-center rounded-xl bg-black text-white'>◐</span><h3 class='mt-5 font-semibold text-black'>Colours</h3><p class='mt-2 text-sm text-neutral-600'>Pick a colour and get the class.</p></div><div><span class='grid h-11 w-11 place-items-center rounded-xl bg-black text-white'>↻</span><h3 class='mt-5 font-semibold text-black'>Animations</h3><p class='mt-2 text-sm text-neutral-600'>A library of entrances and loops.</p></div><div><span class='grid h-11 w-11 place-items-center rounded-xl bg-black text-white'>↗</span><h3 class='mt-5 font-semibold text-black'>Interactions</h3><p class='mt-2 text-sm text-neutral-600'>Menus and modals from one rule.</p></div><div><span class='grid h-11 w-11 place-items-center rounded-xl bg-black text-white'>✦</span><h3 class='mt-5 font-semibold text-black'>Plugins</h3><p class='mt-2 text-sm text-neutral-600'>Figma plugin and an MCP server.</p></div></div></div></section>