Hero Forms

Hero Forms 10 · Paste your HTML

A dark hero with a headline and a code-style text box to paste HTML, plus a start 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-black'><div class='mx-auto max-w-3xl px-6 py-24 text-center'><h1 class='text-5xl font-semibold tracking-tight text-white'>Paste your HTML. Edit it visually.</h1><form class='mt-10 text-left'><textarea rows='6' placeholder='<section class="...">' class='w-full rounded-2xl border border-neutral-800 bg-neutral-950 p-5 font-mono text-sm text-neutral-300 placeholder-neutral-600 outline-none focus:border-neutral-600'></textarea><div class='mt-4 flex items-center justify-between'><p class='text-xs text-neutral-500'>Tailwind classes are kept as they are.</p><button type='button' class='rounded-xl bg-white px-6 py-3 text-sm font-semibold text-black'>Open in editor</button></div></form></div></section>

Hero Forms 09 · Two-step form

A hero card showing step 1 of 2 with a progress bar, one question and a continue 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-neutral-50'><div class='mx-auto max-w-xl px-6 py-24'><div class='rounded-3xl bg-white p-8 shadow-sm ring-1 ring-neutral-200'><div class='flex items-center justify-between text-sm text-neutral-500'><span>Step 1 of 2</span><span>About you</span></div><div class='mt-3 h-1.5 rounded-full bg-neutral-100'><div class='h-1.5 w-1/2 rounded-full bg-black'></div></div><h1 class='mt-8 text-3xl font-semibold tracking-tight text-black'>What do you do?</h1><div class='mt-6 grid gap-3 sm:grid-cols-2'><span class='rounded-xl border-2 border-black p-4 text-sm font-medium text-black'>Designer</span><span class='rounded-xl border border-neutral-300 p-4 text-sm text-neutral-700'>Developer</span><span class='rounded-xl border border-neutral-300 p-4 text-sm text-neutral-700'>Founder</span><span class='rounded-xl border border-neutral-300 p-4 text-sm text-neutral-700'>Something else</span></div><button type='button' class='mt-8 w-full rounded-xl bg-black py-3.5 text-sm font-semibold text-white'>Continue</button></div></div></section>

Hero Forms 08 · Choose and go

A hero with a select field and an email field side by side on one bar 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-4xl px-6 py-28 text-center'><h1 class='text-5xl font-semibold tracking-tight text-black md:text-6xl'>What are you building?</h1><form class='mx-auto mt-10 grid gap-2 rounded-2xl border border-neutral-300 p-2 sm:grid-cols-[1fr_1fr_auto]'><select class='rounded-xl bg-neutral-50 px-4 py-3 text-sm text-black outline-none'><option>Landing page</option><option>Dashboard</option><option>Blog</option><option>Shop</option></select><input type='email' placeholder='Your email' class='rounded-xl px-4 py-3 text-sm outline-none'><button type='button' class='rounded-xl bg-black px-7 py-3 text-sm font-semibold text-white'>Start</button></form></div></section>

Hero Forms 07 · Contact form beside headline

A left headline with a short paragraph, and a right card with name, email, company and 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-neutral-50'><div class='mx-auto grid max-w-6xl items-center gap-12 px-6 py-24 md:grid-cols-[1.2fr_1fr]'><div><h1 class='text-5xl font-semibold tracking-tight text-black'>Let us build it together.</h1><p class='mt-5 max-w-lg text-lg text-neutral-600'>Tell us a little about your project and we will reply within a working day.</p></div><form class='space-y-3 rounded-3xl bg-white p-8 shadow-sm ring-1 ring-neutral-200'><input type='text' placeholder='Name' class='w-full rounded-lg border border-neutral-300 px-4 py-3 text-sm outline-none focus:border-black'><input type='email' placeholder='Work email' class='w-full rounded-lg border border-neutral-300 px-4 py-3 text-sm outline-none focus:border-black'><input type='text' placeholder='Company' class='w-full rounded-lg border border-neutral-300 px-4 py-3 text-sm outline-none focus:border-black'><button type='button' class='w-full rounded-lg bg-black py-3 text-sm font-semibold text-white'>Talk to us</button></form></div></section>

Hero Forms 06 · Paste an address

A hero with a single URL field and an Import button, for tools that start from a web address.

<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-28 text-center'><p class='text-sm font-medium uppercase tracking-widest text-neutral-500'>Import</p><h1 class='mt-3 text-5xl font-semibold tracking-tight text-black'>Paste a page. Edit it visually.</h1><form class='mt-10 flex gap-2 rounded-2xl border border-neutral-300 p-2 focus-within:border-black'><input type='url' placeholder='https://example.com/page' class='min-w-0 flex-1 bg-transparent px-4 text-sm outline-none'><button type='button' class='rounded-xl bg-black px-6 py-3 text-sm font-semibold text-white'>Import</button></form><p class='mt-3 text-xs text-neutral-400'>Works with any public page.</p></div></section>

Hero Forms 05 · Big search field

A hero built around one large rounded search field with suggestion chips 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-neutral-50'><div class='mx-auto max-w-3xl px-6 py-28 text-center'><h1 class='text-5xl font-semibold tracking-tight text-black'>Find a design</h1><form class='mt-10 flex items-center gap-3 rounded-full border border-neutral-300 bg-white py-2 pl-6 pr-2 shadow-sm focus-within:border-black'><span class='text-neutral-400'>⌕</span><input type='search' placeholder='Search heroes, pricing, footers' class='min-w-0 flex-1 bg-transparent text-base outline-none'><button type='button' class='rounded-full bg-black px-6 py-3 text-sm font-semibold text-white'>Search</button></form><div class='mt-6 flex flex-wrap justify-center gap-2 text-sm'><span class='rounded-full border border-neutral-300 bg-white px-4 py-1.5 text-neutral-700'>Hero</span><span class='rounded-full border border-neutral-300 bg-white px-4 py-1.5 text-neutral-700'>Pricing</span><span class='rounded-full border border-neutral-300 bg-white px-4 py-1.5 text-neutral-700'>Footer</span><span class='rounded-full border border-neutral-300 bg-white px-4 py-1.5 text-neutral-700'>Login</span></div></div></section>

Hero Forms 04 · Waitlist with avatars

Hero with an email form and a row of overlapping avatars saying how many are on the waitlist. Sample number.

<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-28 text-center'><h1 class='text-5xl font-semibold tracking-tight text-black md:text-6xl'>Be first in line.</h1><form class='mx-auto mt-10 flex max-w-md gap-2'><input type='email' placeholder='you@company.com' class='min-w-0 flex-1 rounded-xl border border-neutral-300 px-4 py-3.5 text-sm outline-none focus:border-black'><button type='button' class='rounded-xl bg-black px-6 py-3.5 text-sm font-semibold text-white'>Join waitlist</button></form><div class='mt-8 flex items-center justify-center gap-3'><div class='flex -space-x-2'><span class='grid h-8 w-8 place-items-center rounded-full border-2 border-white bg-black text-[10px] font-semibold text-white'>AM</span><span class='grid h-8 w-8 place-items-center rounded-full border-2 border-white bg-neutral-600 text-[10px] font-semibold text-white'>SR</span><span class='grid h-8 w-8 place-items-center rounded-full border-2 border-white bg-neutral-400 text-[10px] font-semibold text-white'>JL</span></div><p class='text-sm text-neutral-500'>2,400 people are waiting (sample)</p></div></div></section>

Hero Forms 03 · Dark with email field

A black hero with a white headline and a dark email field with a white 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-black'><div class='mx-auto max-w-3xl px-6 py-28 text-center'><h1 class='text-5xl font-semibold tracking-tight text-white md:text-6xl'>Ship pages faster.</h1><p class='mx-auto mt-5 max-w-xl text-lg text-neutral-400'>A visual editor that writes real Tailwind HTML.</p><form class='mx-auto mt-10 flex max-w-md gap-2'><input type='email' placeholder='Email address' class='min-w-0 flex-1 rounded-xl border border-neutral-700 bg-neutral-900 px-4 py-3.5 text-sm text-white placeholder-neutral-500 outline-none focus:border-white'><button type='button' class='rounded-xl bg-white px-6 py-3.5 text-sm font-semibold text-black'>Get access</button></form></div></section>

Hero Forms 02 · Split with signup card

Pitch and bullet points on the left, a bordered sign-up card with fields 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'>Start designing in a minute.</h1><ul class='mt-6 space-y-3 text-neutral-600'><li>✓ Draw or paste a page</li><li>✓ Edit visually</li><li>✓ Keep plain HTML and Tailwind</li></ul></div><form class='space-y-4 rounded-3xl border border-neutral-200 p-8 shadow-sm'><h2 class='text-xl font-semibold text-black'>Create your account</h2><input type='text' placeholder='Name' class='w-full rounded-lg border border-neutral-300 px-4 py-3 text-sm outline-none focus:border-black'><input type='email' placeholder='Email' class='w-full rounded-lg border border-neutral-300 px-4 py-3 text-sm outline-none focus:border-black'><input type='password' placeholder='Password' class='w-full rounded-lg border border-neutral-300 px-4 py-3 text-sm outline-none focus:border-black'><button type='button' class='w-full rounded-lg bg-black py-3 text-sm font-semibold text-white'>Sign up</button></form></div></section>

Hero Forms 01 · Headline with email signup

A centered hero with a big headline and an email field with a black button beside it.

<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-28 text-center'><h1 class='text-5xl font-semibold tracking-tight text-black md:text-6xl'>Design in Tailwind. Keep it as code.</h1><p class='mx-auto mt-5 max-w-xl text-lg text-neutral-600'>Join the list and get an invite when your spot opens.</p><form class='mx-auto mt-10 flex max-w-md gap-2'><input type='email' placeholder='you@company.com' class='min-w-0 flex-1 rounded-xl border border-neutral-300 px-4 py-3.5 text-sm outline-none focus:border-black'><button type='button' class='rounded-xl bg-black px-6 py-3.5 text-sm font-semibold text-white hover:bg-neutral-800'>Join</button></form><p class='mt-3 text-xs text-neutral-400'>No spam. One email when it is ready.</p></div></section>