Cookie Consent Banner Detailed

<div class="flex min-h-64 items-start justify-center p-4">
  <button type="button" onclick="this.nextElementSibling.hidden=false" class="rounded-lg bg-[var(--ws-cookie-consent-action-bg,#4f46e5)] px-5 py-2.5 text-sm font-medium text-[var(--ws-cookie-consent-action-text,#fff)] shadow transition hover:opacity-90">Show Cookie Banner</button>
  <div class="ws-cookie-consent fixed inset-x-0 top-0 z-50 border-b border-[var(--ws-cookie-consent-border,#e5e5e5)] bg-[var(--ws-cookie-consent-bg,#ffffff)] px-6 py-4 shadow-lg" hidden>
    <div class="mx-auto max-w-5xl">
      <div class="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
        <p class="text-sm text-[var(--ws-cookie-consent-text,#1a1a1a)]">We use cookies to enhance your experience. Manage your preferences or accept all cookies.</p>
        <div class="flex shrink-0 gap-3">
          <button type="button" onclick="this.closest('.ws-cookie-consent').hidden=true" class="rounded-lg border border-[var(--ws-cookie-consent-border,#e5e5e5)] px-4 py-2 text-sm font-medium text-[var(--ws-cookie-consent-text-soft,#666)] transition hover:opacity-80">Reject All</button>
          <button type="button" onclick="this.closest('.ws-cookie-consent').hidden=true" class="rounded-lg bg-[var(--ws-cookie-consent-action-bg,#4f46e5)] px-4 py-2 text-sm font-medium text-[var(--ws-cookie-consent-action-text,#fff)] transition hover:opacity-90">Accept All</button>
        </div>
      </div>
      <div class="mt-4 flex flex-wrap items-center gap-6 border-t border-[var(--ws-cookie-consent-border,#e5e5e5)] pt-4">
        <div class="flex items-center gap-2">
          <div class="relative inline-flex h-5 w-9 cursor-not-allowed items-center rounded-full bg-[var(--ws-cookie-consent-action-bg,#4f46e5)]">
            <span class="inline-block h-3.5 w-3.5 translate-x-4 rounded-full bg-[var(--ws-cookie-consent-bg)] transition"></span>
          </div>
          <span class="text-xs font-medium text-[var(--ws-cookie-consent-text,#1a1a1a)]">Necessary</span>
        </div>
        <div class="flex items-center gap-2">
          <button type="button" role="switch" aria-checked="false" class="relative inline-flex h-5 w-9 items-center rounded-full bg-[var(--ws-cookie-consent-border,#d4d4d4)] transition">
            <span class="inline-block h-3.5 w-3.5 translate-x-0.5 rounded-full bg-[var(--ws-cookie-consent-bg)] transition"></span>
          </button>
          <span class="text-xs font-medium text-[var(--ws-cookie-consent-text,#1a1a1a)]">Analytics</span>
        </div>
        <div class="flex items-center gap-2">
          <button type="button" role="switch" aria-checked="false" class="relative inline-flex h-5 w-9 items-center rounded-full bg-[var(--ws-cookie-consent-border,#d4d4d4)] transition">
            <span class="inline-block h-3.5 w-3.5 translate-x-0.5 rounded-full bg-[var(--ws-cookie-consent-bg)] transition"></span>
          </button>
          <span class="text-xs font-medium text-[var(--ws-cookie-consent-text,#1a1a1a)]">Marketing</span>
        </div>
      </div>
    </div>
  </div>
</div>