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>