Tailwind CSS Cookie Consent Banner for Vanilla JS

<!-- Requires Tailwind CSS v3 (CLI/PostCSS build, or the Play CDN for prototypes) -->
<div>
  <div data-show="banner">
    <div class="fixed inset-x-0 bottom-0 z-50 p-4" role="region" aria-label="Cookie consent">
      <div class="max-w-4xl mx-auto p-6 bg-white border border-slate-200 shadow-sm rounded-xl">
        <h2 class="text-lg font-semibold text-slate-900">We value your privacy</h2>
        <p class="mt-2 text-sm text-slate-500">We use essential cookies to run this site. With your permission we also use analytics and marketing cookies. You can change your choice at any time. <a href="#" class="font-medium text-[#4f46e5] hover:underline">Cookie policy</a></p>
        <div data-show="prefs" hidden>
          <div class="mt-4 flex flex-col gap-3">
            <label class="flex items-start gap-3 text-sm text-slate-700">
              <input type="checkbox" class="h-4 w-4 accent-[#4f46e5] mt-1" checked disabled>
              <span><strong>Strictly necessary</strong> — security, load balancing, your consent choice. Always on.</span>
            </label>
            <label class="flex items-start gap-3 text-sm text-slate-700">
              <input id="cc-analytics" type="checkbox" class="h-4 w-4 accent-[#4f46e5] mt-1">
              <span><strong>Analytics</strong> — anonymous usage statistics that help us improve.</span>
            </label>
            <label class="flex items-start gap-3 text-sm text-slate-700">
              <input id="cc-marketing" type="checkbox" class="h-4 w-4 accent-[#4f46e5] mt-1">
              <span><strong>Marketing</strong> — personalised ads and campaign measurement.</span>
            </label>
          </div>
        </div>
        <div class="mt-5 flex flex-wrap items-center gap-2">
          <button type="button" class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-semibold rounded-lg bg-[#4f46e5] hover:bg-[#433cc3] text-white shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-[#4f46e5] focus:ring-offset-2 focus:ring-offset-white" data-call="rejectAll" data-close="banner">Reject all</button>
          <button type="button" class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-semibold rounded-lg bg-[#4f46e5] hover:bg-[#433cc3] text-white shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-[#4f46e5] focus:ring-offset-2 focus:ring-offset-white" data-call="acceptAll" data-close="banner">Accept all</button>
          <button type="button" class="inline-flex items-center justify-center px-3 py-2 text-sm font-semibold rounded-lg transition-colors text-slate-700 hover:bg-slate-900/5" data-toggle="prefs" data-expanded="prefs" aria-expanded="false">Customize</button>
          <div data-show="prefs" hidden>
            <button type="button" class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-semibold rounded-lg border transition-colors border-slate-300 text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-[#4f46e5] focus:ring-offset-2 focus:ring-offset-white" data-call="savePreferences" data-close="banner">Save preferences</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div data-hide="banner" hidden>
    <button type="button" class="fixed bottom-0 left-0 m-4 inline-flex items-center justify-center px-4 py-2.5 text-sm font-semibold rounded-lg border transition-colors border-slate-300 text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-[#4f46e5] focus:ring-offset-2 focus:ring-offset-white" data-open="banner">Cookie settings</button>
  </div>
</div>

<script>
  (() => {
    const CONSENT_KEY = 'cookie-consent-v1'; // bump the version to re-ask after policy changes

    function readConsent() {
      try {
        return JSON.parse(localStorage.getItem(CONSENT_KEY));
      } catch {
        return null; // storage blocked / SSR → treat as "not decided"
      }
    }

    function saveConsent(choice) {
      const record = { necessary: true, ...choice, timestamp: new Date().toISOString() };
      try {
        localStorage.setItem(CONSENT_KEY, JSON.stringify(record));
      } catch {}
      // Google Consent Mode v2: only grant what the user chose.
      window.gtag?.('consent', 'update', {
        analytics_storage: choice.analytics ? 'granted' : 'denied',
        ad_storage: choice.marketing ? 'granted' : 'denied',
        ad_user_data: choice.marketing ? 'granted' : 'denied',
        ad_personalization: choice.marketing ? 'granted' : 'denied'
      });
      // Load optional scripts by listening for this event.
      document.dispatchEvent(new CustomEvent('cookie-consent', { detail: record }));
    }

    function acceptAll() {
      saveConsent({ analytics: true, marketing: true });
    }

    function rejectAll() {
      saveConsent({ analytics: false, marketing: false });
    }

    function savePreferences() {
      saveConsent({
        analytics: Boolean(document.getElementById('cc-analytics')?.checked),
        marketing: Boolean(document.getElementById('cc-marketing')?.checked)
      });
    }
    const state = { banner: !readConsent(), prefs: false };
    const actions = { acceptAll, rejectAll, savePreferences };
    const pair = (s) => s.split(':');
    const sync = () => {
      document.querySelectorAll('[data-show]').forEach((el) => (el.hidden = !state[el.dataset.show]));
      document.querySelectorAll('[data-hide]').forEach((el) => (el.hidden = !!state[el.dataset.hide]));
      document.querySelectorAll('[data-when]').forEach((el) => { const [k, v] = pair(el.dataset.when); el.hidden = state[k] !== v; });
      document.querySelectorAll('[data-pressed]').forEach((el) => { const [k, v] = pair(el.dataset.pressed); el.setAttribute('aria-pressed', String(state[k] === v)); });
      document.querySelectorAll('[data-expanded]').forEach((el) => el.setAttribute('aria-expanded', String(!!state[el.dataset.expanded])));
    };
    document.addEventListener('click', (e) => {
      const t = e.target.closest('[data-toggle],[data-open],[data-close],[data-set],[data-call]');
      if (!t) return;
      const { toggle, open, close, set, call } = t.dataset;
      if (call) actions[call]?.(e);
      if (toggle) state[toggle] = !state[toggle];
      if (open) state[open] = true;
      if (close) state[close] = false;
      if (set) { const [k, v] = pair(set); state[k] = v; }
      sync();
    });
    sync();
  })();
</script>