Home
Pixel Perfect
Cookie Consent bottom banner

Cookie Consent bottom banner

Ask for cookie consent

This tailwind example is contributed by Pixel Perfect, on 03-Jul-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Cookie consent

Author Pixel Perfect

2.5k

Fork Fullscreen

<div class="cookie-consent fixed bottom-0 left-0 w-full z-50 p-4 md:p-6 bg-gray-900 text-white">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <div class="flex items-center flex-1 mr-4 mb-4 md:mb-0">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mr-4 text-yellow-400 hidden md:block" viewBox="0 0 24 24"
        fill="currentColor">
        <path
          d="M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12q0-2.025.838-3.937T5.163 4.7T8.7 2.5t4.5-.45q.375.05.575.313t.225.712q.05 1.6 1.188 2.738T17.9 7q.525.025.8.3t.3.85q.05 1.05.638 1.725t1.637 1.025q.35.125.538.363t.187.587q.05 2.075-.725 3.925t-2.125 3.238t-3.2 2.187T12 22m0-2q3.05 0 5.413-2.1T20 12.55q-1.25-.55-1.963-1.5t-.962-2.125q-1.925-.275-3.3-1.65t-1.7-3.3q-2-.05-3.512.725T6.037 6.688T4.512 9.325T4 12q0 3.325 2.338 5.663T12 20m-1.5-10q.625 0 1.063-.437T12 8.5t-.437-1.062T10.5 7t-1.062.438T9 8.5t.438 1.063T10.5 10m-2 5q.625 0 1.063-.437T10 13.5t-.437-1.062T8.5 12t-1.062.438T7 13.5t.438 1.063T8.5 15m6.5 1q.425 0 .713-.288T16 15t-.288-.712T15 14t-.712.288T14 15t.288.713T15 16">
        </path>
      </svg>
      <div>
        <h2 class="text-2xl font-bold mb-2">Cookie Consent</h2>
        <p class="text-sm md:text-base">We use cookies to optimize our communication and enhance your experience. By
          clicking "Approve", you agree to the collection of cookies. For more information, please see our <a
            href="/privacy" class="text-blue-400 hover:underline">Privacy Policy</a>.</p>
      </div>
    </div>
    <div>
      <button id="rcc-confirm-button" class="bg-yellow-400 hover:bg-yellow-500 text-black font-bold py-2 px-4 rounded transition duration-300" aria-label="Accept cookies">
        Approve
      </button>
    </div>
  </div>
</div>

Related Examples

dismissible cookie banner with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.5k
Cookie banner

Author:
Anonymous

10 months ago

1k
Cookie Consent Banner
Inform your website visitors about the use of cookies with this unobtrusive banner.

Author:
Nikita

1 year ago

5.5k
Cookie Preferences Banner
Display cookie preferences on a website. It appears at the bottom-left corner of the screen.

Author:
King Kali

2 years ago

8k
Cookie consent notification

Author:
Anonymous

1 year ago

1.1k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

172
Bottom drawer with Tailwind CSS and alpinejs
How to create a bottom drawer with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.4k
Cookie consent
Sticky Bottom Cookie Consent Notification

Author:
Sophia Baker

2 years ago

10.7k
Cookie consent sticky bottom banner

Author:
Santiago Hernandez

1 year ago

2.2k
Cookie card
Tailwind cookie consent card

Author:
Gopi Yadav

2 years ago

13.6k
Cookie Policy Alert
Notify users about the use of cookies and tracking technologies. It offers choices to accept or decline cookies and modify preferences.

Author:
Mereani Waqa

2 years ago

7.3k
Cookie Consent Banner
Fixed bottom cookies consent banner.

Author:
Andrew Hughes

2 years ago

6.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components