Application Components

<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 p-10'><div class='mx-auto max-w-2xl'><ol class='flex items-center gap-3 text-sm'><li class='flex items-center gap-2 font-medium text-black'><span class='grid h-7 w-7 place-items-center rounded-full bg-black text-xs text-white'>✓</span>Account</li><span class='h-px flex-1 bg-black'></span><li class='flex items-center gap-2 font-medium text-black'><span class='grid h-7 w-7 place-items-center rounded-full border-2 border-black text-xs'>2</span>Project</li><span class='h-px flex-1 bg-neutral-200'></span><li class='flex items-center gap-2 text-neutral-400'><span class='grid h-7 w-7 place-items-center rounded-full border border-neutral-300 text-xs'>3</span>Invite</li></ol><form class='mt-10 space-y-4 rounded-2xl border border-neutral-200 p-8'><h2 class='text-xl font-semibold text-black'>Name your project</h2><input type='text' placeholder='Public site' class='w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'><div class='flex justify-between pt-2'><button type='button' class='rounded-lg border border-neutral-300 px-4 py-2 text-sm font-medium text-black'>Back</button><button type='button' class='rounded-lg bg-black px-5 py-2 text-sm font-semibold text-white'>Next</button></div></form></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 p-10'><div class='mx-auto max-w-xl space-y-6'><div class='flex gap-3'><span class='grid h-9 w-9 shrink-0 place-items-center rounded-full bg-black text-xs font-semibold text-white'>AM</span><div><p class='text-sm'><span class='font-semibold text-black'>Alex Morgan</span> <span class='text-neutral-400'>· 2 hours ago</span></p><p class='mt-1 text-sm text-neutral-700'>Can we make the hero button a pill?</p><a href='#' class='mt-1 inline-block text-xs font-medium text-neutral-500 hover:text-black'>Reply</a></div></div><div class='ml-12 flex gap-3 border-l border-neutral-200 pl-4'><span class='grid h-9 w-9 shrink-0 place-items-center rounded-full bg-neutral-600 text-xs font-semibold text-white'>SR</span><div><p class='text-sm'><span class='font-semibold text-black'>Sam Rivera</span> <span class='text-neutral-400'>· 1 hour ago</span></p><p class='mt-1 text-sm text-neutral-700'>Done. It is rounded-full now.</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 p-10'><div class='mx-auto max-w-md rounded-3xl border border-dashed border-neutral-300 px-8 py-16 text-center'><span class='mx-auto grid h-14 w-14 place-items-center rounded-2xl border border-neutral-300 text-2xl text-neutral-400'>▢</span><h2 class='mt-6 text-lg font-semibold text-black'>No pages yet</h2><p class='mt-2 text-sm text-neutral-600'>Create your first page by drawing on the canvas or pasting HTML.</p><div class='mt-6 flex justify-center gap-2'><a href='#' class='rounded-lg bg-black px-4 py-2 text-sm font-semibold text-white'>New page</a><a href='#' class='rounded-lg border border-neutral-300 px-4 py-2 text-sm font-medium text-black'>Paste HTML</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-neutral-50 p-10'><div class='mx-auto max-w-xl space-y-3'><div class='flex items-center gap-4 rounded-2xl border border-neutral-200 bg-white p-4'><span class='grid h-11 w-11 place-items-center rounded-xl bg-black text-xs font-semibold text-white'>HTML</span><div class='min-w-0 flex-1'><p class='truncate text-sm font-medium text-black'>home.html</p><p class='text-xs text-neutral-500'>21 KB</p></div><button type='button' class='text-neutral-400 hover:text-black' aria-label='Remove'>×</button></div><div class='flex items-center gap-4 rounded-2xl border border-neutral-200 bg-white p-4'><span class='grid h-11 w-11 place-items-center rounded-xl bg-neutral-200 text-xs font-semibold text-black'>PNG</span><div class='min-w-0 flex-1'><p class='truncate text-sm font-medium text-black'>hero-banner.png</p><div class='mt-2 h-1.5 rounded-full bg-neutral-100'><div class='h-1.5 w-2/3 rounded-full bg-black'></div></div></div><span class='text-xs text-neutral-500'>66%</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 p-10'><div class='mx-auto max-w-md rounded-2xl border border-neutral-200 p-5'><div class='flex items-center justify-between'><h2 class='font-semibold text-black'>November 2026</h2><div class='flex gap-1 text-neutral-500'><button type='button' class='grid h-8 w-8 place-items-center rounded-lg hover:bg-neutral-100'>←</button><button type='button' class='grid h-8 w-8 place-items-center rounded-lg hover:bg-neutral-100'>→</button></div></div><div class='mt-4 grid grid-cols-7 gap-y-1 text-center text-xs'><span class='text-neutral-400'>M</span><span class='text-neutral-400'>T</span><span class='text-neutral-400'>W</span><span class='text-neutral-400'>T</span><span class='text-neutral-400'>F</span><span class='text-neutral-400'>S</span><span class='text-neutral-400'>S</span><span class='py-2 text-neutral-700'>9</span><span class='py-2 text-neutral-700'>10</span><span class='py-2 text-neutral-700'>11</span><span class='mx-auto grid h-8 w-8 place-items-center rounded-full bg-black py-2 font-medium text-white'>12</span><span class='py-2 text-neutral-700'>13<span class='mx-auto block h-1 w-1 rounded-full bg-black'></span></span><span class='py-2 text-neutral-400'>14</span><span class='py-2 text-neutral-400'>15</span><span class='py-2 text-neutral-700'>16</span><span class='py-2 text-neutral-700'>17</span><span class='py-2 text-neutral-700'>18<span class='mx-auto block h-1 w-1 rounded-full bg-black'></span></span><span class='py-2 text-neutral-700'>19</span><span class='py-2 text-neutral-700'>20</span><span class='py-2 text-neutral-400'>21</span><span class='py-2 text-neutral-400'>22</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-neutral-50 p-8'><div class='mx-auto grid max-w-5xl gap-4 md:grid-cols-3'><div class='rounded-2xl bg-neutral-100 p-4'><h3 class='flex justify-between text-sm font-semibold text-black'>To do <span class='text-neutral-400'>3</span></h3><div class='mt-4 space-y-3'><div class='rounded-xl border border-neutral-200 bg-white p-4 text-sm text-neutral-700'>Write the docs</div><div class='rounded-xl border border-neutral-200 bg-white p-4 text-sm text-neutral-700'>Test in Firefox</div></div></div><div class='rounded-2xl bg-neutral-100 p-4'><h3 class='flex justify-between text-sm font-semibold text-black'>Doing <span class='text-neutral-400'>2</span></h3><div class='mt-4 space-y-3'><div class='rounded-xl border-2 border-black bg-white p-4 text-sm font-medium text-black'>Pricing page<p class='mt-2 text-xs font-normal text-neutral-500'>Due Friday</p></div><div class='rounded-xl border border-neutral-200 bg-white p-4 text-sm text-neutral-700'>Config tab polish</div></div></div><div class='rounded-2xl bg-neutral-100 p-4'><h3 class='flex justify-between text-sm font-semibold text-black'>Done <span class='text-neutral-400'>4</span></h3><div class='mt-4 space-y-3'><div class='rounded-xl border border-neutral-200 bg-white p-4 text-sm text-neutral-400 line-through'>Animation library</div><div class='rounded-xl border border-neutral-200 bg-white p-4 text-sm text-neutral-400 line-through'>Interactions</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-neutral-50 p-10'><div class='mx-auto max-w-lg overflow-hidden rounded-2xl border border-neutral-200 bg-white'><div class='flex items-center justify-between border-b border-neutral-200 px-5 py-4'><h2 class='font-semibold text-black'>Notifications</h2><a href='#' class='text-sm text-neutral-500 underline'>Mark all read</a></div><ul class='divide-y divide-neutral-100'><li class='flex gap-3 px-5 py-4'><span class='mt-1.5 h-2 w-2 shrink-0 rounded-full bg-black'></span><div><p class='text-sm text-black'><span class='font-semibold'>Sam Rivera</span> commented on Pricing</p><p class='text-xs text-neutral-400'>5 minutes ago</p></div></li><li class='flex gap-3 px-5 py-4'><span class='mt-1.5 h-2 w-2 shrink-0 rounded-full bg-black'></span><div><p class='text-sm text-black'>Your page <span class='font-semibold'>Home</span> was published</p><p class='text-xs text-neutral-400'>1 hour ago</p></div></li><li class='flex gap-3 px-5 py-4'><span class='mt-1.5 h-2 w-2 shrink-0 rounded-full bg-neutral-200'></span><div><p class='text-sm text-neutral-600'>Jordan Lee shared a project with you</p><p class='text-xs text-neutral-400'>Yesterday</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-white p-10'><div class='mx-auto max-w-3xl'><div class='flex flex-wrap items-center gap-5'><span class='grid h-20 w-20 place-items-center rounded-full bg-black text-2xl font-semibold text-white'>AM</span><div class='flex-1'><h1 class='text-2xl font-semibold text-black'>Alex Morgan</h1><p class='text-sm text-neutral-500'>Founder · Example City</p></div><button type='button' class='rounded-lg border border-neutral-300 px-4 py-2 text-sm font-medium text-black'>Edit profile</button></div><div class='mt-8 flex gap-6 border-b border-neutral-200 text-sm'><span class='border-b-2 border-black pb-3 font-medium text-black'>Overview</span><span class='pb-3 text-neutral-500'>Projects</span><span class='pb-3 text-neutral-500'>Activity</span></div><dl class='mt-6 divide-y divide-neutral-100 text-sm'><div class='grid grid-cols-3 py-3'><dt class='text-neutral-500'>Email</dt><dd class='col-span-2 text-black'>alex@example.com</dd></div><div class='grid grid-cols-3 py-3'><dt class='text-neutral-500'>Joined</dt><dd class='col-span-2 text-black'>March 2025</dd></div></dl></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 p-10'><div class='mx-auto max-w-2xl rounded-3xl border border-neutral-200 bg-white'><div class='border-b border-neutral-200 p-6'><h2 class='text-lg font-semibold text-black'>Notifications</h2><p class='mt-1 text-sm text-neutral-500'>Choose what you hear about.</p></div><ul class='divide-y divide-neutral-200'><li class='flex items-center justify-between gap-6 p-6'><div><p class='text-sm font-medium text-black'>Product updates</p><p class='text-sm text-neutral-500'>New features and fixes.</p></div><span class='relative h-6 w-11 shrink-0 rounded-full bg-black'><span class='absolute right-0.5 top-0.5 h-5 w-5 rounded-full bg-white'></span></span></li><li class='flex items-center justify-between gap-6 p-6'><div><p class='text-sm font-medium text-black'>Comments</p><p class='text-sm text-neutral-500'>When someone replies to you.</p></div><span class='relative h-6 w-11 shrink-0 rounded-full bg-black'><span class='absolute right-0.5 top-0.5 h-5 w-5 rounded-full bg-white'></span></span></li><li class='flex items-center justify-between gap-6 p-6'><div><p class='text-sm font-medium text-black'>Weekly summary</p><p class='text-sm text-neutral-500'>A short email every Monday.</p></div><span class='relative h-6 w-11 shrink-0 rounded-full bg-neutral-200'><span class='absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white'></span></span></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>
        <aside class='flex min-h-[600px] w-64 flex-col border-r border-neutral-200 bg-white p-5'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-6 w-auto self-start'><nav class='mt-8 space-y-1 text-sm'><a href='#' class='flex items-center gap-3 rounded-lg bg-black px-3 py-2 font-medium text-white'>▢ Dashboard</a><a href='#' class='flex items-center gap-3 rounded-lg px-3 py-2 text-neutral-600 hover:bg-neutral-100'>☰ Projects</a><a href='#' class='flex items-center gap-3 rounded-lg px-3 py-2 text-neutral-600 hover:bg-neutral-100'>↻ Activity</a><a href='#' class='flex items-center gap-3 rounded-lg px-3 py-2 text-neutral-600 hover:bg-neutral-100'>⚙ Settings</a></nav><div class='mt-auto rounded-2xl bg-neutral-100 p-4'><p class='text-sm font-semibold text-black'>Go Pro</p><p class='mt-1 text-xs text-neutral-600'>Unlimited projects and animations.</p><a href='#' class='mt-3 block rounded-lg bg-black py-2 text-center text-xs font-semibold text-white'>Upgrade</a></div><div class='mt-4 flex items-center gap-3 border-t border-neutral-200 pt-4'><span class='grid h-9 w-9 place-items-center rounded-full bg-black text-xs font-semibold text-white'>AM</span><div class='text-sm'><p class='font-medium text-black'>Alex Morgan</p><p class='text-xs text-neutral-500'>alex@example.com</p></div></div></aside>