Cookie Banner

<div class="flex min-h-64 items-center justify-center">
  <button type="button" onclick="this.nextElementSibling.hidden=false" class="rounded-lg border border-[var(--ws-banner-border)] bg-[var(--ws-banner-bg)] px-5 py-2.5 text-sm font-medium text-[var(--ws-banner-text)] shadow transition hover:opacity-90">Show Cookie Banner</button>
  <div class="ws-banner fixed inset-x-0 bottom-0 z-50 p-4" hidden>
    <div class="mx-auto flex max-w-4xl flex-col items-center gap-4 rounded-2xl border border-[var(--ws-banner-border)] bg-[var(--ws-banner-bg)] p-6 shadow-lg sm:flex-row">
      <div class="flex-1 text-center sm:text-left">
        <p class="text-sm font-semibold text-[var(--ws-banner-text)]">We use cookies</p>
        <p class="mt-1 text-sm text-[var(--ws-banner-text)]/80">We use cookies to improve your experience. By continuing, you agree to our <a href="#" class="font-medium underline underline-offset-2">cookie policy</a>.</p>
      </div>
      <div class="flex shrink-0 gap-3">
        <button type="button" onclick="this.closest('.ws-banner').hidden=true" class="rounded-lg border border-[var(--ws-banner-text)]/20 px-4 py-2 text-sm font-medium text-[var(--ws-banner-text)] transition hover:opacity-80">Decline</button>
        <button type="button" onclick="this.closest('.ws-banner').hidden=true" class="rounded-lg bg-white/20 px-4 py-2 text-sm font-semibold text-[var(--ws-banner-text)] transition hover:bg-white/30">Accept all</button>
      </div>
    </div>
  </div>
</div>