Cookie Banners

Cookie Banners 10 · Preference center

A wider settings panel listing cookie groups with short descriptions and accept and reject 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>
        <div class='grid min-h-[520px] place-items-center bg-neutral-100 p-6'><div class='w-full max-w-2xl rounded-3xl bg-white p-8 shadow-2xl'><div class='flex items-start justify-between'><div><h3 class='text-xl font-semibold text-black'>Privacy settings</h3><p class='mt-1 text-sm text-neutral-600'>Choose which cookies to allow.</p></div><button type='button' class='grid h-9 w-9 place-items-center rounded-full border border-neutral-200 text-neutral-500' aria-label='Close'>×</button></div><div class='mt-6 space-y-3'><div class='rounded-xl border border-neutral-200 p-4'><p class='text-sm font-semibold text-black'>Strictly necessary</p><p class='mt-1 text-sm text-neutral-600'>Keep you signed in and remember your choices. Always on.</p></div><div class='rounded-xl border border-neutral-200 p-4'><p class='text-sm font-semibold text-black'>Performance</p><p class='mt-1 text-sm text-neutral-600'>Anonymous statistics about how pages are used.</p></div><div class='rounded-xl border border-neutral-200 p-4'><p class='text-sm font-semibold text-black'>Marketing</p><p class='mt-1 text-sm text-neutral-600'>Help us show relevant information elsewhere.</p></div></div><div class='mt-6 flex justify-end gap-2'><button type='button' class='rounded-lg border border-neutral-300 px-5 py-2.5 text-sm font-semibold text-black'>Reject all</button><button type='button' class='rounded-lg bg-black px-5 py-2.5 text-sm font-semibold text-white'>Accept selected</button></div></div></div>

Cookie Banners 09 · Two-column bar

A bottom bar with a title and text on the left and stacked buttons 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>
        <div class='relative h-[320px] 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 inset-x-0 bottom-0 border-t border-neutral-200 bg-white'><div class='mx-auto grid max-w-5xl gap-6 p-6 md:grid-cols-[1fr_200px]'><div><h3 class='font-semibold text-black'>We value your privacy</h3><p class='mt-1 text-sm text-neutral-600'>We use cookies to run this site and, with your consent, to measure how it is used. You can change your mind at any time from the footer.</p></div><div class='flex flex-col gap-2'><button type='button' class='rounded-lg bg-black py-2.5 text-sm font-semibold text-white'>Accept all</button><button type='button' class='rounded-lg border border-neutral-300 py-2.5 text-sm font-semibold text-black'>Essential only</button></div></div></div></div>

Cookie Banners 08 · Floating pill

A rounded pill floating at the bottom center with a short text and two small 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>
        <div class='relative h-[260px] 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-1/2 rounded bg-neutral-200'></div></div><div class='absolute inset-x-0 bottom-6 flex justify-center px-4'><div class='flex flex-wrap items-center gap-3 rounded-full border border-neutral-200 bg-white py-2 pl-5 pr-2 shadow-xl'><p class='text-sm text-neutral-700'>We use cookies</p><button type='button' class='rounded-full px-3 py-1.5 text-sm text-neutral-600 hover:text-black'>Settings</button><button type='button' class='rounded-full bg-black px-4 py-1.5 text-sm font-medium text-white'>Accept</button></div></div></div>

Cookie Banners 07 · Card with switches

A preferences card with three cookie categories, each with a switch, and a save 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>
        <div class='grid min-h-[480px] place-items-center bg-neutral-100 p-6'><div class='w-full max-w-md rounded-2xl border border-neutral-200 bg-white p-6 shadow-xl'><h3 class='text-lg font-semibold text-black'>Cookie preferences</h3><ul class='mt-5 divide-y divide-neutral-200 text-sm'><li class='flex items-center justify-between py-4'><div><p class='font-medium text-black'>Essential</p><p class='text-neutral-500'>Needed for the site to work</p></div><span class='relative h-6 w-11 rounded-full bg-neutral-300'><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 py-4'><div><p class='font-medium text-black'>Analytics</p><p class='text-neutral-500'>Helps us improve the site</p></div><span class='relative h-6 w-11 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 py-4'><div><p class='font-medium text-black'>Marketing</p><p class='text-neutral-500'>Used for adverts</p></div><span class='relative h-6 w-11 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><button type='button' class='mt-4 w-full rounded-xl bg-black py-3 text-sm font-semibold text-white'>Save preferences</button></div></div>

Cookie Banners 06 · Top strip

A thin banner across the top of the page with a short line and a close-style 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>
        <div class='relative h-[240px] overflow-hidden bg-white'><div class='flex flex-wrap items-center justify-center gap-4 bg-neutral-900 px-4 py-2.5 text-sm text-neutral-200'><p>We use cookies. <a href='#' class='font-medium text-white underline'>Settings</a></p><button type='button' class='rounded-md bg-white px-3 py-1 text-xs font-semibold text-black'>OK</button></div><div class='space-y-3 p-8'><div class='h-4 w-1/3 rounded bg-neutral-100'></div><div class='h-3 w-2/3 rounded bg-neutral-100'></div></div></div>

Cookie Banners 05 · Small notice

A small bottom-right notice with one line of text and a single accept 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>
        <div class='relative h-[260px] 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-1/2 rounded bg-neutral-200'></div></div><div class='absolute bottom-4 right-4 flex max-w-sm items-center gap-4 rounded-xl border border-neutral-200 bg-white p-4 shadow-lg'><p class='text-sm text-neutral-600'>We only use cookies that keep the site working.</p><button type='button' class='shrink-0 rounded-lg bg-black px-4 py-2 text-sm font-medium text-white'>Got it</button></div></div>

Cookie Banners 04 · Centered with choices

A centered card over a dimmed page with a title, short text and three stacked 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>
        <div class='relative grid h-[420px] place-items-center overflow-hidden bg-neutral-100'><div class='absolute inset-0 bg-black/40'></div><div class='relative w-full max-w-md rounded-3xl bg-white p-8 text-center shadow-2xl'><h3 class='text-xl font-semibold text-black'>Your privacy</h3><p class='mt-3 text-sm text-neutral-600'>We use cookies to improve your experience. Choose what you are happy with.</p><div class='mt-6 space-y-2'><button type='button' class='w-full rounded-xl bg-black py-3 text-sm font-semibold text-white'>Accept all</button><button type='button' class='w-full rounded-xl border border-neutral-300 py-3 text-sm font-semibold text-black'>Reject non-essential</button><button type='button' class='w-full py-2 text-sm text-neutral-500 underline'>Manage choices</button></div></div></div>

Cookie Banners 03 · Dark bar

A black bottom bar with white text and a white accept 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>
        <div class='relative h-[300px] overflow-hidden bg-white'><div class='space-y-3 p-8'><div class='h-4 w-1/3 rounded bg-neutral-100'></div><div class='h-3 w-2/3 rounded bg-neutral-100'></div></div><div class='absolute inset-x-0 bottom-0 bg-black p-5'><div class='mx-auto flex max-w-5xl flex-wrap items-center justify-between gap-4'><p class='text-sm text-neutral-300'>This site uses cookies. <a href='#' class='font-medium text-white underline'>Learn more</a></p><div class='flex gap-2'><button type='button' class='rounded-lg border border-neutral-700 px-4 py-2 text-sm font-medium text-white'>No thanks</button><button type='button' class='rounded-lg bg-white px-4 py-2 text-sm font-semibold text-black'>Accept</button></div></div></div></div>

Cookie Banners 02 · Corner card

A compact white card in the bottom-left corner with two buttons and a policy link.

<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-[360px] 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-5 left-5 w-full max-w-sm rounded-2xl border border-neutral-200 bg-white p-6 shadow-xl'><h3 class='font-semibold text-black'>Cookies</h3><p class='mt-2 text-sm text-neutral-600'>We use a few cookies to make this site work. Read our <a href='#' class='font-medium text-black underline'>cookie policy</a>.</p><div class='mt-5 flex gap-2'><button type='button' class='flex-1 rounded-lg border border-neutral-300 py-2 text-sm font-medium text-black'>Decline</button><button type='button' class='flex-1 rounded-lg bg-black py-2 text-sm font-medium text-white'>Accept</button></div></div></div>

Cookie Banners 01 · Bottom bar

A full-width white bar at the bottom of the page with a message and three 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>
        <div class='relative h-[340px] 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 class='h-3 w-1/2 rounded bg-neutral-200'></div></div><div class='absolute inset-x-0 bottom-0 border-t border-neutral-200 bg-white p-5 shadow-lg'><div class='mx-auto flex max-w-5xl flex-wrap items-center justify-between gap-4'><p class='max-w-2xl text-sm text-neutral-600'>We use cookies to keep the site working and to understand how it is used. You choose what to allow.</p><div class='flex gap-2'><button type='button' class='rounded-lg px-4 py-2 text-sm font-medium text-black hover:bg-neutral-100'>Customize</button><button type='button' class='rounded-lg border border-neutral-300 px-4 py-2 text-sm font-medium text-black hover:bg-neutral-50'>Reject all</button><button type='button' class='rounded-lg bg-black px-4 py-2 text-sm font-medium text-white'>Accept all</button></div></div></div></div>