Fullscreen 🍪 Cookies Notice

A modern and responsive modal with a clean design

This tailwind example is contributed by Iris Callahan, on 18-Dec-2024. Component is made with Tailwind v3.4. It is responsive.

Cookie consent

Author Iris Callahan

Tailwind v3.4 1.7k 4

Fork Fullscreen

<div class="fixed inset-0 bg-gray-800 bg-opacity-60 overflow-y-auto h-full w-full z-10" id="cookie-modal" role="dialog"
  aria-modal="true">
  <div class="relative top-20 mx-auto p-4 md:p-6 border w-3/4 m-10 md:w-96 shadow-lg rounded-lg bg-white z-50">
    <div class="text-center">
      
      <h3 class="text-2xl md:text-4xl font-extrabold text-gray-900 flex items-center justify-center gap-2">
        🍪 Cookies Notice
      </h3>
      
      <div class="mt-4 px-4 py-3">
        <p class="text-sm md:text-base text-gray-600 leading-relaxed">
          We use cookies to provide a better browsing experience and ensure our website functions properly.
          Your data remains safe with us — no tracking, no selling.
        </p>
      </div>
      
      <div class="mt-6 flex flex-col gap-3 items-center">
        <form method="post" action="https://hustleseo.com/accept_cookies">
          <button id="accept-btn"
            class="px-5 py-2 bg-green-500 text-white text-base font-semibold rounded-lg w-full shadow-md hover:bg-green-600 transition-all"
            type="submit">
            Accept and Continue
          </button>
          <input type="hidden" name="authenticity_token" value="rtgM4oNX1_s5NAq3urkj6-bbAu56nyzLsTNEHV7_fACS2rqxhaTWqDARPXnLGdHr18-nWytmMgXKawVjZYcBZQ" autocomplete="off">
        </form>
      </div>
    </div>
  </div>
</div>

Related Examples

Cookie consent sticky bottom banner

Santiago Hernandez

2 years ago

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

King Kali

3 years ago

8.8k
bottom drawer with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

3.3k
Cookie consent notification

Anonymous

2 years ago

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

Carla Hoffman

2 years ago

3.1k
Cookie Consent bottom banner
Ask for cookie consent

Pixel Perfect

2 years ago

3.1k
Cookie consent dialog box

Leif99

3 years ago

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

3 years ago

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

Nikita

2 years ago

6.1k
Cookie banner

Anonymous

1 year ago

2.3k
Hospitality Management

Frederick250

5 months ago

336
Cookie consent banner

Leif99

3 years ago

18.2k