divcookie-bannerbeginner

Cookie Banner

A bottom-fixed cookie consent banner with accept/decline buttons.

Preview

We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.

<div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg z-50 p-4">
  <div class="max-w-5xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
    <p class="text-sm text-gray-600">We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.</p>
    <div class="flex gap-3 flex-shrink-0">
      <button class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 font-medium transition-colors">Decline</button>
      <button class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors">Accept All</button>
    </div>
  </div>
</div>

Color Breakdown

Background

bg-white

#ffffff

Border

border-gray-200

#e5e7eb

Text

text-gray-600

#4b5563

Accept Button

bg-blue-600

#2563eb

Accept Text

text-white

#ffffff

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300

Use Cases

GDPR complianceCookie consentPrivacy policy notices

Browser Support

All modern browsers.

Related Recipes

Floating Action Button

button - beginner

CTA Banner

section - beginner

Success Alert

div - beginner

Error Alert

div - beginner

Warning Alert

div - beginner

Info Toast

div - intermediate

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

How do I persist the cookie choice?▼

Use JavaScript localStorage to save the consent state. On page load, check localStorage and hide the banner if consent was already given.