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

2.2k

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

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

Author:
Carla Hoffman

1 year ago

2.6k
Cookie consent
Sticky Bottom Cookie Consent Notification

Author:
Sophia Baker

2 years ago

10.7k
Cookie consent banner

Author:
Leif99

2 years ago

16.8k
bottom drawer with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.3k
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 card
Tailwind cookie consent card

Author:
Gopi Yadav

2 years ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

719
Cookie consent notification

Author:
Anonymous

1 year ago

1.1k
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 dialog box

Author:
Leif99

2 years ago

14.4k
dismissible cookie banner with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

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

171

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components