Home
Iris Callahan
Fullscreen 🍪 Cookies Notice

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 CSS v3. It is responsive.

Cookie consent

Author Iris Callahan

1.1k

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

dismissible cookie banner with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.5k
Cookie consent sticky bottom banner

Author:
Santiago Hernandez

1 year ago

2.2k
Cookie Consent Banner
Fixed bottom cookies consent banner.

Author:
Andrew Hughes

2 years ago

6.9k
Cookie Consent bottom banner
Ask for cookie consent

Author:
Pixel Perfect

1 year ago

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

Author:
Carla Hoffman

1 year ago

2.6k
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
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 notification

Author:
Anonymous

1 year ago

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

Author:
Nikita

1 year ago

5.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
Cookie card
Tailwind cookie consent card

Author:
Gopi Yadav

2 years ago

13.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components