Home
Santiago Hernandez
Cookie consent sticky bottom banner

Cookie consent sticky bottom banner

This tailwind example is contributed by Santiago Hernandez, on 26-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Cookie consent

Author Santiago Hernandez

1.3k

Fork Fullscreen

<div class="fixed bottom-0 right-0 flex items-center justify-center py-4 z-50 mx-4">
  <div class="container">
    <div class="flex flex-wrap items-center justify-between rounded-lg border bg-white dark:bg-gray-800 p-4">
      <div class="w-full md:w-7/12 lg:w-2/3 flex items-center px-2">
        <span class="text-indigo-500 mr-4">
          <svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" height="30" width="30" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
          </svg>
        </span>
        <div class="mb-6 md:mb-0">
          <h3 class="text-lg font-bold text-black dark:text-white">We use cookies</h3>
          <p class="text-sm font-medium text-body-color dark:text-gray-300">Please accept our cookies so we can provide the best experience.</p>
        </div>
      </div>
      <div class="w-full md:w-5/12 lg:w-1/3">
        <div class="flex items-center space-x-3 md:justify-end">
          <button class="button bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 active:bg-gray-100 dark:active:bg-gray-500 dark:active:border-gray-500 text-gray-600 dark:text-gray-100 radius-round h-11 px-8 py-2">Decline</button>
          <button class="button bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700 text-white radius-round h-11 px-8 py-2">Accept</button>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Cookie consent notification

Author:
Anonymous

2 months ago

101
Cookie consent dialog box

Author:
Leif99

1 year ago

13.3k
Cookie card
Tailwind cookie consent card

Author:
Gopi Yadav

1 year ago

12.5k
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

1 year ago

6.3k
Cookie Consent Banner
Fixed bottom cookies consent banner.

Author:
Andrew Hughes

1 year ago

5.8k
Cookie consent
Sticky Bottom Cookie Consent Notification

Author:
Sophia Baker

1 year ago

9.6k
bottom drawer with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

7 months ago

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

Author:
King Kali

1 year ago

7k
Minimal cookie consent popup
notification bar placed at the bottom center of the screen

Author:
Carla Hoffman

9 months ago

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

Author:
Nikita

11 months ago

4k
Cookie consent banner

Author:
Leif99

1 year ago

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

Author:
Michael Andreuzza

7 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components