Tailwind CSS Cookie Consent Banner for React — Glassmorphism

import { useState } from 'react';

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)
  });
}

export default function CookieConsent() {
  const [banner, setBanner] = useState(() => !readConsent());
  const [prefs, setPrefs] = useState(false);

  return (
    <div>
      <div hidden={!banner}>
        <div className="fixed inset-x-0 bottom-0 z-50 p-4" role="region" aria-label="Cookie consent">
          <div className="max-w-4xl mx-auto p-6 bg-white/60 backdrop-blur-xl border border-white/60 shadow-2xl rounded-xl">
            <h2 className="text-lg font-semibold text-slate-900">We value your privacy</h2>
            <p className="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="#" className="font-medium text-[#4f46e5] hover:underline">Cookie policy</a></p>
            <div hidden={!prefs}>
              <div className="mt-4 flex flex-col gap-3">
                <label className="flex items-start gap-3 text-sm text-slate-700">
                  <input type="checkbox" className="h-4 w-4 accent-[#4f46e5] mt-1" defaultChecked disabled />
                  <span><strong>Strictly necessary</strong> — security, load balancing, your consent choice. Always on.</span>
                </label>
                <label className="flex items-start gap-3 text-sm text-slate-700">
                  <input id="cc-analytics" type="checkbox" className="h-4 w-4 accent-[#4f46e5] mt-1" />
                  <span><strong>Analytics</strong> — anonymous usage statistics that help us improve.</span>
                </label>
                <label className="flex items-start gap-3 text-sm text-slate-700">
                  <input id="cc-marketing" type="checkbox" className="h-4 w-4 accent-[#4f46e5] mt-1" />
                  <span><strong>Marketing</strong> — personalised ads and campaign measurement.</span>
                </label>
              </div>
            </div>
            <div className="mt-5 flex flex-wrap items-center gap-2">
              <button type="button" className="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" onClick={(e) => { rejectAll(e); setBanner(false); }}>Reject all</button>
              <button type="button" className="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" onClick={(e) => { acceptAll(e); setBanner(false); }}>Accept all</button>
              <button type="button" className="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" onClick={() => setPrefs((v) => !v)} aria-expanded={prefs}>Customize</button>
              <div hidden={!prefs}>
                <button type="button" className="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" onClick={(e) => { savePreferences(e); setBanner(false); }}>Save preferences</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div hidden={banner}>
        <button type="button" className="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" onClick={() => setBanner(true)}>Cookie settings</button>
      </div>
    </div>
  );
}