Feedback

<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>
        <div class='relative h-[420px] overflow-hidden bg-neutral-100'><div class='space-y-3 p-8'><div class='h-4 w-1/3 rounded bg-neutral-200'></div><div class='h-3 w-2/3 rounded bg-neutral-200'></div></div><div class='absolute bottom-6 right-6 w-72 rounded-2xl border border-neutral-200 bg-white p-5 shadow-2xl'><div class='flex items-center justify-between'><p class='font-semibold text-black'>Feedback</p><button type='button' class='text-neutral-400' aria-label='Close'>×</button></div><textarea rows='3' placeholder='What can we improve?' class='mt-3 w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm outline-none focus:border-black'></textarea><button type='button' class='mt-3 w-full rounded-lg bg-black py-2.5 text-sm font-semibold text-white'>Send</button></div></div>

<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-sm px-6 py-24 text-center'><span class='mx-auto grid h-14 w-14 place-items-center rounded-full bg-black text-2xl text-white'>✓</span><h2 class='mt-6 text-2xl font-semibold tracking-tight text-black'>Thanks for the feedback</h2><p class='mt-2 text-sm text-neutral-600'>We read every message and use it to decide what to build.</p><a href='#' class='mt-6 inline-block text-sm font-medium text-black underline underline-offset-4'>Back to the editor</a></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-md px-6 py-20'><form class='rounded-3xl border border-neutral-800 bg-neutral-950 p-8'><h2 class='text-xl font-semibold text-white'>What should we build next?</h2><textarea rows='4' placeholder='Your idea' class='mt-5 w-full rounded-lg border border-neutral-800 bg-black px-3 py-2.5 text-sm text-white placeholder-neutral-600 outline-none focus:border-white'></textarea><button type='button' class='mt-4 w-full rounded-lg bg-white py-3 text-sm font-semibold text-black'>Send idea</button></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'><div class='mx-auto max-w-2xl px-6 py-20'><h2 class='text-3xl font-semibold tracking-tight text-black'>Report a bug</h2><form class='mt-8 space-y-5'><label class='block text-sm font-medium text-black'>Title<input type='text' class='mt-1.5 w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'></label><label class='block text-sm font-medium text-black'>Steps to reproduce<textarea rows='4' class='mt-1.5 w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'></textarea></label><label class='block text-sm font-medium text-black'>What did you expect?<textarea rows='3' class='mt-1.5 w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'></textarea></label><label class='block text-sm font-medium text-black'>How bad is it?<select class='mt-1.5 w-full rounded-lg border border-neutral-300 bg-white px-3 py-2.5 text-sm outline-none focus:border-black'><option>Small annoyance</option><option>Gets in the way</option><option>Blocks my work</option></select></label><button type='button' class='rounded-lg bg-black px-6 py-3 text-sm font-semibold text-white'>Submit report</button></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'><div class='mx-auto max-w-lg px-6 py-16'><div class='rounded-2xl border border-neutral-200 p-6'><p class='font-semibold text-black'>Sorry about that. What went wrong?</p><ul class='mt-4 space-y-3 text-sm text-neutral-700'><li><label class='flex items-center gap-3'><input type='radio' name='r' class='accent-black' checked>It was hard to follow</label></li><li><label class='flex items-center gap-3'><input type='radio' name='r' class='accent-black'>It did not answer my question</label></li><li><label class='flex items-center gap-3'><input type='radio' name='r' class='accent-black'>Something is out of date</label></li></ul><button type='button' class='mt-5 rounded-lg bg-black px-5 py-2.5 text-sm font-semibold text-white'>Send</button></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>
        <div class='relative grid min-h-[520px] place-items-center overflow-hidden bg-neutral-100 p-6'><div class='absolute inset-0 bg-black/40'></div><form class='relative w-full max-w-md rounded-3xl bg-white p-8 shadow-2xl'><h2 class='text-xl font-semibold text-black'>Send feedback</h2><p class='mt-1 text-sm text-neutral-600'>What is this about?</p><div class='mt-4 flex flex-wrap gap-2 text-sm'><span class='rounded-full bg-black px-3.5 py-1.5 font-medium text-white'>Idea</span><span class='rounded-full border border-neutral-300 px-3.5 py-1.5 text-neutral-700'>Bug</span><span class='rounded-full border border-neutral-300 px-3.5 py-1.5 text-neutral-700'>Question</span></div><textarea rows='4' placeholder='Your message' class='mt-4 w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'></textarea><div class='mt-5 flex justify-end gap-2'><button type='button' class='rounded-lg border border-neutral-300 px-4 py-2 text-sm font-medium text-black'>Cancel</button><button type='button' class='rounded-lg bg-black px-4 py-2 text-sm font-semibold text-white'>Send</button></div></form></div>

<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-20'><div class='rounded-3xl border border-neutral-200 bg-white p-8'><h2 class='text-xl font-semibold text-black'>How likely are you to recommend us?</h2><div class='mt-6 grid grid-cols-11 gap-1.5 text-sm'><span class='grid h-11 place-items-center rounded-lg border border-neutral-300 text-black'>0</span><span class='grid h-11 place-items-center rounded-lg border border-neutral-300 text-black'>1</span><span class='grid h-11 place-items-center rounded-lg border border-neutral-300 text-black'>2</span><span class='grid h-11 place-items-center rounded-lg border border-neutral-300 text-black'>3</span><span class='grid h-11 place-items-center rounded-lg border border-neutral-300 text-black'>4</span><span class='grid h-11 place-items-center rounded-lg border border-neutral-300 text-black'>5</span><span class='grid h-11 place-items-center rounded-lg border border-neutral-300 text-black'>6</span><span class='grid h-11 place-items-center rounded-lg border border-neutral-300 text-black'>7</span><span class='grid h-11 place-items-center rounded-lg border border-neutral-300 text-black'>8</span><span class='grid h-11 place-items-center rounded-lg bg-black font-medium text-white'>9</span><span class='grid h-11 place-items-center rounded-lg border border-neutral-300 text-black'>10</span></div><div class='mt-2 flex justify-between text-xs text-neutral-500'><span>Not likely</span><span>Very likely</span></div><label class='mt-6 block text-sm font-medium text-black'>What is the main reason for your score?<textarea rows='3' class='mt-1.5 w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'></textarea></label></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-lg px-6 py-20 text-center'><h2 class='text-2xl font-semibold tracking-tight text-black'>How easy was it to get started?</h2><div class='mt-8 flex justify-center gap-3'><button type='button' class='h-12 w-12 rounded-xl border border-neutral-300 font-medium text-black'>1</button><button type='button' class='h-12 w-12 rounded-xl border border-neutral-300 font-medium text-black'>2</button><button type='button' class='h-12 w-12 rounded-xl border border-neutral-300 font-medium text-black'>3</button><button type='button' class='h-12 w-12 rounded-xl bg-black font-medium text-white'>4</button><button type='button' class='h-12 w-12 rounded-xl border border-neutral-300 font-medium text-black'>5</button></div><div class='mt-3 flex justify-between px-1 text-xs text-neutral-500'><span>Very hard</span><span>Very easy</span></div><button type='button' class='mt-8 rounded-lg bg-black px-8 py-3 text-sm font-semibold text-white'>Continue</button></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-xl px-6 py-16'><div class='flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-neutral-200 p-5'><p class='font-medium text-black'>Was this page helpful?</p><div class='flex gap-2'><button type='button' class='rounded-lg border border-neutral-300 px-4 py-2 text-sm font-medium text-black hover:bg-black hover:text-white'>Yes</button><button type='button' class='rounded-lg border border-neutral-300 px-4 py-2 text-sm font-medium text-black hover:bg-black hover:text-white'>No</button></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-md px-6 py-20'><form class='rounded-3xl border border-neutral-200 bg-white p-8'><h2 class='text-xl font-semibold text-black'>How was your experience?</h2><div class='mt-4 flex gap-1 text-3xl text-black'><span>★</span><span>★</span><span>★</span><span>★</span><span class='text-neutral-300'>★</span></div><textarea rows='4' placeholder='Tell us more (optional)' class='mt-5 w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'></textarea><button type='button' class='mt-4 w-full rounded-lg bg-black py-3 text-sm font-semibold text-white'>Send feedback</button></form></div></section>