Tailwind CSS Cookie Consent Banner for Vue 3 — Glassmorphism

<script setup>
import { ref } from 'vue';

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 banner = ref(!readConsent());
const prefs = ref(false);
</script>

<template>
  <div>
    <div v-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/60 backdrop-blur-xl border border-white/60 shadow-2xl 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 v-show="prefs">
            <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" @click="rejectAll($event); banner = false">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" @click="acceptAll($event); banner = false">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" @click="prefs = !prefs" :aria-expanded="prefs">Customize</button>
            <div v-show="prefs">
              <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-white/80 bg-white/40 text-slate-800 hover:bg-white/70 focus:outline-none focus:ring-2 focus:ring-[#4f46e5] focus:ring-offset-2 focus:ring-offset-white" @click="savePreferences($event); banner = false">Save preferences</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-show="!banner">
      <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-white/80 bg-white/40 text-slate-800 hover:bg-white/70 focus:outline-none focus:ring-2 focus:ring-[#4f46e5] focus:ring-offset-2 focus:ring-offset-white" @click="banner = true">Cookie settings</button>
    </div>
  </div>
</template>