Cookie Preferences Banner

Display cookie preferences on a website. It appears at the bottom-left corner of the screen.

This tailwind example is contributed by King Kali, on 14-Oct-2023. Component is made with Tailwind v3.4. It is responsive.

Cookie consent

Author King Kali

Tailwind v3.4 8.8k 11

Fork Fullscreen

<div class="h-screen w-full relative">
  <div class="absolute bottom-20 left-20 max-w-sm px-4 py-2 shadow-md transition-all duration-500 ease-in-out"
    style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); font-family: Inter, sans-serif; border-radius: 1rem;">
    <div class="flex flex-col px-0 ltr:lg:pl-10 rtl:lg:pr-10">
      <div class="w-full flex justify-between items-center">
        <p class="text-md md:text-lg font-semibold m-0" style="color: rgb(89, 79, 253);">Your Cookie Preferences</p>
      </div>
      <div class="flex flex-col gap-2 items-stretch ltr:lg:pr-10 rtl:lg:pl-10">
        <div class="flex-1">
          <p class="my-1 text-xs md:text-sm" style="color: rgb(0, 0, 0);">
            By clicking “Accept all,” you agree to the storing of cookies on your device for functional, analytics, and advertising purposes.
          </p>
          <div class="flex text-center text-[9px] mt-2 gap-2">
            <span class="ltr:mr-4 ltr:last:mr-0 rtl:ml-4 rtl:last:ml-0">
              <a href="" target="_blank" class="no-underline cursor-pointer shrink-0" style="color: rgb(89, 79, 253); border-bottom: 1px solid rgb(89, 79, 253);">Privacy policy</a>
            </span>
            <span class="ltr:mr-4 ltr:last:mr-0 rtl:ml-4 rtl:last:ml-0">
              <a class="no-underline cursor-pointer shrink-0" style="color: rgb(89, 79, 253); border-bottom: 1px solid rgb(89, 79, 253);">Cookie policy</a>
            </span>
          </div>
        </div>
        <div class="flex flex-col justify-around mt-4 lg:mt-0 ltr:lg:pl-14 rtl:lg:pr-14">
          <div class="flex-1 gap-2  items-center flex my-0">
            <button class="flex-1 lg:flex-none ltr:mr-2 rtl:ml-2 flex justify-center items-center text-center cursor-pointer px-2 md:px-4 py-2 border border-transparent text-xs leading-4 font-black" style="background-color: rgba(89, 79, 253, 0.2); color: rgb(89, 79, 253); border-radius: 0.375rem;">
              <span>Custom permissions</span>
            </button>
            <button class="flex-1 lg:flex-none flex justify-center items-center text-center cursor-pointer px-2 md:px-4 py-2 border border-transparent text-xs leading-4 font-black" style="background-color: rgb(89, 79, 253); color: rgb(255, 255, 255); border-radius: 0.375rem;">
              <span>Accept all</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Cookie consent banner

Leif99

3 years ago

18.1k
Cookie consent
Sticky Bottom Cookie Consent Notification

Sophia Baker

3 years ago

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

Mereani Waqa

2 years ago

8.4k
Cookie card
Tailwind cookie consent card

Gopi Yadav

3 years ago

14.3k
Cookie Consent Banner
Fixed bottom cookies consent banner.

Andrew Hughes

2 years ago

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

Nikita

2 years ago

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

Michael Andreuzza

2 years ago

3k
Cookie consent notification

Anonymous

1 year ago

2.3k
dismissible cookie banner with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

2.9k
Cookie banner

Anonymous

1 year ago

2.3k
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.5k
Fullscreen 🍪 Cookies Notice
A modern and responsive modal with a clean design

Iris Callahan

1 year ago

1.7k