Hero Sections

Hero Sections 10 · Logo and one button

Minimal hero: the Windcraft logo, a one-line tagline and a single round 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 flex max-w-3xl flex-col items-center px-6 py-32 text-center'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-14 w-auto'><h1 class='mt-10 text-4xl font-semibold tracking-tight text-black md:text-5xl'>Design in Tailwind. Keep it as code.</h1><a href='#' class='mt-8 rounded-full bg-black px-7 py-3 text-sm font-semibold text-white'>Open the editor</a></div></section>

Hero Sections 09 · Browser frame below

Light grey hero with a browser window cropped at the bottom edge to show the product.

<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 pt-24 text-center'><h1 class='text-5xl font-semibold tracking-tight text-black md:text-6xl'>See your page as you build it.</h1><p class='mx-auto mt-5 max-w-xl text-lg text-neutral-600'>Edit on a canvas. The page stays real HTML.</p><a href='#' class='mt-8 inline-block rounded-lg bg-black px-6 py-3 text-sm font-medium text-white'>Start now</a><div class='mt-14 overflow-hidden rounded-t-2xl border border-b-0 border-neutral-200 bg-white shadow-xl'><div class='flex items-center gap-1.5 border-b border-neutral-200 px-4 py-3'><span class='h-2.5 w-2.5 rounded-full bg-neutral-300'></span><span class='h-2.5 w-2.5 rounded-full bg-neutral-300'></span><span class='h-2.5 w-2.5 rounded-full bg-neutral-300'></span><span class='ml-3 rounded-md bg-neutral-100 px-3 py-1 text-xs text-neutral-500'>windcraft.swapniljadhav.com</span></div><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/editor.png' alt='The Windcraft editor' loading='lazy' class='h-64 w-full object-cover object-left-top'></div></div></section>

Hero Sections 08 · Announcement and pills

Hero under a thin black announcement bar, with three feature pills below the intro.

<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='bg-black px-6 py-2 text-center text-xs font-medium text-white'>New: interactions without writing JavaScript →</div><div class='mx-auto max-w-4xl px-6 py-24 text-center'><h1 class='text-5xl font-semibold tracking-tight text-black md:text-6xl'>Make it move. Keep it plain.</h1><p class='mx-auto mt-5 max-w-xl text-lg text-neutral-600'>Hover states, animations and menus, all as ordinary HTML attributes and classes.</p><div class='mt-8 flex flex-wrap justify-center gap-2'><span class='rounded-full border border-neutral-300 px-4 py-1.5 text-sm text-black'>Hover states</span><span class='rounded-full border border-neutral-300 px-4 py-1.5 text-sm text-black'>Animations</span><span class='rounded-full border border-neutral-300 px-4 py-1.5 text-sm text-black'>Interactions</span></div></div></section>

Hero Sections 07 · Code window

Dark hero with the pitch on the left and a code snippet window on the right.

<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-950'><div class='mx-auto grid max-w-6xl items-center gap-12 px-6 py-24 md:grid-cols-2'><div><h1 class='text-5xl font-semibold tracking-tight text-white'>The code is the design.</h1><p class='mt-5 text-lg text-neutral-400'>Select anything. Its classes are right there, and every edit updates both.</p><a href='#' class='mt-8 inline-block rounded-lg bg-white px-5 py-3 text-sm font-semibold text-black'>Try the editor</a></div><pre class='overflow-x-auto rounded-xl border border-neutral-800 bg-black p-6 font-mono text-sm leading-7 text-neutral-300'><code>&lt;a href='#apps'
          class='rounded-3xl bg-black
                 px-6 py-3 text-white
                 hover:opacity-85'&gt;
          Browse apps
        &lt;/a&gt;</code></pre></div></section>

Hero Sections 06 · With works-with row

Centered hero followed by a quiet row of tool names it works with.

<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 pt-28 text-center'><h1 class='text-5xl font-semibold tracking-tight text-black md:text-6xl'>The visual editor for Tailwind.</h1><p class='mx-auto mt-5 max-w-xl text-lg text-neutral-600'>Paste a page or draw one, then edit it with controls that write real classes.</p><a href='#' class='mt-8 inline-block rounded-lg bg-black px-6 py-3 text-sm font-medium text-white'>Open the editor</a></div><div class='mx-auto mt-20 max-w-4xl border-t border-neutral-200 px-6 py-10'><p class='text-center text-xs uppercase tracking-widest text-neutral-500'>Works with</p><div class='mt-6 flex flex-wrap items-center justify-center gap-x-12 gap-y-4 text-lg font-semibold text-neutral-400'><span>Tailwind</span><span>Figma</span><span>Claude</span><span>Cursor</span><span>React</span></div></div></section>

Hero Sections 05 · Oversized type

Left-aligned hero with a very large headline, an underlined phrase and a round 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-28'><p class='text-sm font-medium uppercase tracking-widest text-neutral-500'>Windcraft</p><h1 class='mt-6 max-w-4xl text-6xl font-semibold leading-[1.02] tracking-tight text-black md:text-8xl'>Design it. <span class='underline decoration-4 underline-offset-8'>Ship the HTML.</span></h1><div class='mt-12 flex flex-wrap items-center gap-6'><a href='#' class='rounded-full bg-black px-7 py-4 text-sm font-semibold text-white'>Get started</a><p class='max-w-xs text-sm text-neutral-500'>No export step. What you see is the code you ship.</p></div></div></section>

Hero Sections 04 · Email signup with facts

Centered hero with an email form and a three-column facts row underneath.

<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'><h1 class='text-5xl font-semibold tracking-tight text-black'>Get updates when it ships.</h1><p class='mt-4 text-lg text-neutral-600'>One short email when something new lands.</p><form class='mx-auto mt-8 flex max-w-md gap-2'><input type='email' placeholder='you@company.com' class='min-w-0 flex-1 rounded-lg border border-neutral-300 px-4 py-3 text-sm outline-none focus:border-black'><button type='button' class='rounded-lg bg-black px-5 py-3 text-sm font-medium text-white'>Notify me</button></form><dl class='mt-16 grid grid-cols-3 border-t border-neutral-200 pt-8'><div><dt class='text-sm text-neutral-500'>Tailwind</dt><dd class='mt-1 text-3xl font-semibold text-black'>v3 + v4</dd></div><div><dt class='text-sm text-neutral-500'>Output</dt><dd class='mt-1 text-3xl font-semibold text-black'>Plain HTML</dd></div><div><dt class='text-sm text-neutral-500'>License</dt><dd class='mt-1 text-3xl font-semibold text-black'>MIT</dd></div></dl></div></section>

Hero Sections 03 · Dark with grid

Black hero with a faint white grid behind a centered headline and two buttons.

<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='relative overflow-hidden bg-black'><div class='absolute inset-0 opacity-20 [background-image:linear-gradient(#fff_1px,transparent_1px),linear-gradient(90deg,#fff_1px,transparent_1px)] [background-size:56px_56px]'></div><div class='relative mx-auto max-w-4xl px-6 py-32 text-center'><h1 class='text-5xl font-semibold tracking-tight text-white md:text-7xl'>Build pages the way you think.</h1><p class='mx-auto mt-6 max-w-xl text-lg text-neutral-400'>A canvas on top, plain HTML underneath. Nothing to export or rebuild.</p><div class='mt-10 flex justify-center gap-3'><a href='#' class='rounded-lg bg-white px-6 py-3 text-sm font-semibold text-black'>Try it now</a><a href='#' class='rounded-lg border border-neutral-700 px-6 py-3 text-sm font-semibold text-white'>View on GitHub</a></div></div></section>

Hero Sections 02 · Split with preview card

Two columns: headline and buttons on the left, a mock browser card showing a class on the right.

<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-2'><div><h1 class='text-5xl font-semibold tracking-tight text-black md:text-6xl'>Every click writes real Tailwind.</h1><p class='mt-5 text-lg text-neutral-600'>Change a corner, a colour or a hover state, and the code panel shows the class.</p><div class='mt-8 flex gap-3'><a href='#' class='rounded-lg bg-black px-5 py-3 text-sm font-medium text-white'>Start designing</a><a href='#' class='px-5 py-3 text-sm font-medium text-black'>Read the docs →</a></div></div><div class='rounded-2xl border border-neutral-200 bg-neutral-50 p-4 shadow-sm'><div class='flex gap-1.5 pb-3'><span class='h-2.5 w-2.5 rounded-full bg-neutral-300'></span><span class='h-2.5 w-2.5 rounded-full bg-neutral-300'></span><span class='h-2.5 w-2.5 rounded-full bg-neutral-300'></span></div><div class='rounded-xl bg-white p-8 text-center ring-1 ring-neutral-200'><div class='mx-auto h-10 w-40 rounded-full bg-black'></div><p class='mt-4 font-mono text-sm text-neutral-500'>rounded-full bg-black</p></div></div></div></section>

Hero Sections 01 · Centered headline

Centered hero with a small badge, big headline, two buttons on a white background.

<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-28 text-center'><span class='inline-flex items-center gap-2 rounded-full border border-neutral-200 px-3 py-1 text-xs font-medium text-neutral-600'><span class='h-1.5 w-1.5 rounded-full bg-black'></span>Visual editor for Tailwind</span><h1 class='mt-6 text-5xl font-semibold tracking-tight text-black md:text-7xl'>Design in Tailwind.<br>Keep it as code.</h1><p class='mx-auto mt-6 max-w-2xl text-lg text-neutral-600'>Draw or paste a page, edit it visually, and the code stays plain HTML with Tailwind classes.</p><div class='mt-10 flex flex-wrap justify-center gap-3'><a href='#' class='rounded-lg bg-black px-6 py-3 text-sm font-medium text-white hover:bg-neutral-800'>Open the editor</a><a href='#' class='rounded-lg border border-neutral-300 px-6 py-3 text-sm font-medium text-black hover:bg-neutral-50'>See how it works</a></div></div></section>