18 Tailwind CSS Settings Pages
16 / 18

All 18 in 18 Tailwind CSS Settings Pages

  1. 01Tailwind Account Settings Page Layout
  2. 02Tailwind Billing and Plan Settings Page
  3. 03Tailwind Usage Page with Quota Meters
  4. 04Tailwind Invoice History Table
  5. 05Tailwind Payment Method Settings Card
  6. 06Tailwind Team Members Page with Roles
  7. 07Tailwind Invite Teammates Form
  8. 08Tailwind Roles and Permissions Matrix
  9. 09Tailwind API Keys Management Page
  10. 10Tailwind Two-Factor Authentication Setup
  11. 11Tailwind Active Sessions Settings Page
  12. 12Tailwind Notification Preferences Page
  13. 13Tailwind Connected Apps Settings Page
  14. 14Tailwind Appearance Settings Page
  15. 15Tailwind Data Export Request Page
  16. 16Tailwind Audit Log Activity Page
  17. 17Tailwind Webhooks Settings Page
  18. 18Tailwind Danger Zone Delete Account
Pure TailwindMIT licensed

Tailwind Audit Log Activity Page

A zero-JavaScript audit trail grouped by day: who did what, to what, from where — with category chips and a 'High-risk only' switch that filter in pure CSS, empty day headings that hide themselves, and every event expanding into a red/green JSON diff of exactly what changed.

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="tsp-16 group/log w-full min-h-svh bg-tsp16-bg px-4 py-10 font-tsp16-sans text-tsp16-ink antialiased sm:px-8 sm:py-14" aria-labelledby="tsp-16-h">
  <div class="mx-auto grid w-full max-w-5xl gap-6">
    <header class="flex flex-wrap items-end justify-between gap-4">
      <div><h1 id="tsp-16-h" class="text-3xl font-semibold tracking-tight">Audit log</h1><p class="mt-1 text-tsp16-mut">Every change in the Northwind workspace · kept for 12 months on Business.</p></div>
      <a href="#tsp-16-h" class="inline-flex min-h-11 items-center gap-2 rounded-xl border border-tsp16-line bg-white px-4 text-sm font-semibold shadow-xs transition hover:bg-tsp16-bg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tsp16-acc"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M12 3v12M7 10l5 5 5-5M5 21h14"/></svg>Export CSV</a>
    </header>

    <div class="flex flex-wrap items-center justify-between gap-3">
      <fieldset class="flex flex-wrap gap-2">
        <legend class="sr-only">Filter by category</legend>
        <label class="inline-flex min-h-11 cursor-pointer items-center rounded-full border border-tsp16-line bg-white px-4 text-sm font-medium text-tsp16-mut transition hover:text-tsp16-ink has-checked:border-transparent has-checked:bg-tsp16-ink has-checked:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp16-acc"><input type="radio" name="tsp-16-f" id="tsp-16-f-all" class="sr-only" checked>All</label>
        <label class="inline-flex min-h-11 cursor-pointer items-center rounded-full border border-tsp16-line bg-white px-4 text-sm font-medium text-tsp16-mut transition hover:text-tsp16-ink has-checked:border-transparent has-checked:bg-tsp16-ink has-checked:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp16-acc"><input type="radio" name="tsp-16-f" id="tsp-16-f-auth" class="sr-only">Sign-in</label>
        <label class="inline-flex min-h-11 cursor-pointer items-center rounded-full border border-tsp16-line bg-white px-4 text-sm font-medium text-tsp16-mut transition hover:text-tsp16-ink has-checked:border-transparent has-checked:bg-tsp16-ink has-checked:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp16-acc"><input type="radio" name="tsp-16-f" id="tsp-16-f-members" class="sr-only">Members</label>
        <label class="inline-flex min-h-11 cursor-pointer items-center rounded-full border border-tsp16-line bg-white px-4 text-sm font-medium text-tsp16-mut transition hover:text-tsp16-ink has-checked:border-transparent has-checked:bg-tsp16-ink has-checked:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp16-acc"><input type="radio" name="tsp-16-f" id="tsp-16-f-billing" class="sr-only">Billing</label>
        <label class="inline-flex min-h-11 cursor-pointer items-center rounded-full border border-tsp16-line bg-white px-4 text-sm font-medium text-tsp16-mut transition hover:text-tsp16-ink has-checked:border-transparent has-checked:bg-tsp16-ink has-checked:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp16-acc"><input type="radio" name="tsp-16-f" id="tsp-16-f-security" class="sr-only">Security</label>
        <label class="inline-flex min-h-11 cursor-pointer items-center rounded-full border border-tsp16-line bg-white px-4 text-sm font-medium text-tsp16-mut transition hover:text-tsp16-ink has-checked:border-transparent has-checked:bg-tsp16-ink has-checked:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp16-acc"><input type="radio" name="tsp-16-f" id="tsp-16-f-api" class="sr-only">API</label>
      </fieldset>
      <label class="flex min-h-11 cursor-pointer items-center gap-3 text-sm font-medium"><span class="relative"><input id="tsp-16-risk" type="checkbox" role="switch" class="peer sr-only"><span class="block h-6 w-11 rounded-full bg-zinc-300 transition peer-checked:bg-rose-600 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-tsp16-acc"></span><span class="pointer-events-none absolute left-0.5 top-0.5 size-5 rounded-full bg-white shadow-sm transition peer-checked:translate-x-5"></span></span>High-risk only</label>
    </div>

    <div class="grid gap-6 [&_[data-ev]]:transition group-has-[#tsp-16-risk:checked]/log:[&_[data-ev]:not([data-risk])]:hidden group-has-[#tsp-16-f-auth:checked]/log:[&_[data-ev]:not([data-cat=auth])]:hidden group-has-[#tsp-16-f-members:checked]/log:[&_[data-ev]:not([data-cat=members])]:hidden group-has-[#tsp-16-f-billing:checked]/log:[&_[data-ev]:not([data-cat=billing])]:hidden group-has-[#tsp-16-f-security:checked]/log:[&_[data-ev]:not([data-cat=security])]:hidden group-has-[#tsp-16-f-api:checked]/log:[&_[data-ev]:not([data-cat=api])]:hidden">

      <section class="grid gap-3 group-has-[#tsp-16-risk:checked]/log:[&:not(:has([data-risk]))]:hidden group-has-[#tsp-16-f-auth:checked]/log:[&:not(:has([data-cat=auth]))]:hidden group-has-[#tsp-16-f-members:checked]/log:[&:not(:has([data-cat=members]))]:hidden group-has-[#tsp-16-f-billing:checked]/log:[&:not(:has([data-cat=billing]))]:hidden group-has-[#tsp-16-f-security:checked]/log:[&:not(:has([data-cat=security]))]:hidden group-has-[#tsp-16-f-api:checked]/log:[&:not(:has([data-cat=api]))]:hidden" aria-labelledby="tsp-16-d1">
        <h2 id="tsp-16-d1" class="text-xs font-semibold uppercase tracking-[0.14em] text-tsp16-mut">Today · Oct 7</h2>
        <ul class="divide-y divide-tsp16-line overflow-hidden rounded-2xl border border-tsp16-line bg-white">
          <li data-ev data-cat="members"><details class="group/ev"><summary class="grid min-h-11 cursor-pointer list-none grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 px-4 py-3.5 transition hover:bg-tsp16-bg/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tsp16-acc sm:px-5 [&::-webkit-details-marker]:hidden"><span class="grid size-9 place-items-center rounded-full bg-violet-100 text-xs font-semibold text-violet-700">NP</span><span class="grid gap-1"><span class="text-sm"><strong class="font-semibold">Noah Patel</strong> changed <strong class="font-semibold">Leo Martins</strong>' role to <span class="rounded bg-tsp16-bg px-1 font-tsp16-mono text-[13px]">admin</span></span><span class="flex flex-wrap items-center gap-x-3 gap-y-1 font-tsp16-mono text-xs text-tsp16-mut"><span class="rounded bg-sky-50 px-1.5 py-0.5 font-tsp16-sans font-semibold text-sky-700">Members</span><time datetime="2026-10-07T10:42">10:42 AM</time><span>73.15.••.•• · Chrome / macOS</span></span></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-2 size-4 text-tsp16-mut transition group-open/ev:rotate-180"><path d="m6 9 6 6 6-6"/></svg></summary><div class="px-4 pb-4 sm:pl-17 sm:pr-5"><pre class="overflow-x-auto rounded-xl bg-tsp16-ink p-4 font-tsp16-mono text-xs leading-relaxed text-white/70"><span class="block">  "member": "leo@northwind.co",</span><span class="block bg-rose-500/15 text-rose-300">- "role": "member"</span><span class="block bg-emerald-500/15 text-emerald-300">+ "role": "admin"</span><span class="block">  "request_id": "req_8Fk2…"</span></pre></div></details></li>
          <li data-ev data-cat="security" data-risk><details class="group/ev"><summary class="grid min-h-11 cursor-pointer list-none grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 px-4 py-3.5 transition hover:bg-tsp16-bg/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tsp16-acc sm:px-5 [&::-webkit-details-marker]:hidden"><span class="grid size-9 place-items-center rounded-full bg-teal-100 text-xs font-semibold text-teal-700">AM</span><span class="grid gap-1"><span class="text-sm"><strong class="font-semibold">Ava Mitchell</strong> required two-factor authentication for <strong class="font-semibold">all members</strong></span><span class="flex flex-wrap items-center gap-x-3 gap-y-1 font-tsp16-mono text-xs text-tsp16-mut"><span class="rounded bg-amber-50 px-1.5 py-0.5 font-tsp16-sans font-semibold text-amber-800">Security</span><span class="rounded bg-rose-50 px-1.5 py-0.5 font-tsp16-sans font-semibold text-rose-700">High risk</span><time datetime="2026-10-07T09:15">9:15 AM</time><span>73.15.••.•• · Chrome / macOS</span></span></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-2 size-4 text-tsp16-mut transition group-open/ev:rotate-180"><path d="m6 9 6 6 6-6"/></svg></summary><div class="px-4 pb-4 sm:pl-17 sm:pr-5"><pre class="overflow-x-auto rounded-xl bg-tsp16-ink p-4 font-tsp16-mono text-xs leading-relaxed text-white/70"><span class="block bg-rose-500/15 text-rose-300">- "require_2fa": false</span><span class="block bg-emerald-500/15 text-emerald-300">+ "require_2fa": true</span><span class="block bg-emerald-500/15 text-emerald-300">+ "grace_period_days": 7</span></pre></div></details></li>
          <li data-ev data-cat="api"><details class="group/ev"><summary class="grid min-h-11 cursor-pointer list-none grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 px-4 py-3.5 transition hover:bg-tsp16-bg/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tsp16-acc sm:px-5 [&::-webkit-details-marker]:hidden"><span class="grid size-9 place-items-center rounded-full bg-violet-100 text-xs font-semibold text-violet-700">NP</span><span class="grid gap-1"><span class="text-sm"><strong class="font-semibold">Noah Patel</strong> created API key <strong class="font-semibold">CI pipeline</strong> with scope <span class="rounded bg-tsp16-bg px-1 font-tsp16-mono text-[13px]">read</span></span><span class="flex flex-wrap items-center gap-x-3 gap-y-1 font-tsp16-mono text-xs text-tsp16-mut"><span class="rounded bg-indigo-50 px-1.5 py-0.5 font-tsp16-sans font-semibold text-indigo-700">API</span><time datetime="2026-10-07T08:02">8:02 AM</time><span>98.42.••.•• · Firefox / Linux</span></span></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-2 size-4 text-tsp16-mut transition group-open/ev:rotate-180"><path d="m6 9 6 6 6-6"/></svg></summary><div class="px-4 pb-4 sm:pl-17 sm:pr-5"><pre class="overflow-x-auto rounded-xl bg-tsp16-ink p-4 font-tsp16-mono text-xs leading-relaxed text-white/70"><span class="block bg-emerald-500/15 text-emerald-300">+ "key_id": "key_01J7KM71bc"</span><span class="block bg-emerald-500/15 text-emerald-300">+ "env": "live", "scopes": ["read"]</span><span class="block bg-emerald-500/15 text-emerald-300">+ "expires_at": "2027-01-05"</span></pre></div></details></li>
          <li data-ev data-cat="auth" data-risk><details class="group/ev"><summary class="grid min-h-11 cursor-pointer list-none grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 px-4 py-3.5 transition hover:bg-tsp16-bg/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tsp16-acc sm:px-5 [&::-webkit-details-marker]:hidden"><span class="grid size-9 place-items-center rounded-full bg-teal-100 text-xs font-semibold text-teal-700">AM</span><span class="grid gap-1"><span class="text-sm"><strong class="font-semibold">Ava Mitchell</strong> signed in from a <strong class="font-semibold">new location</strong> — London, UK</span><span class="flex flex-wrap items-center gap-x-3 gap-y-1 font-tsp16-mono text-xs text-tsp16-mut"><span class="rounded bg-emerald-50 px-1.5 py-0.5 font-tsp16-sans font-semibold text-emerald-700">Sign-in</span><span class="rounded bg-rose-50 px-1.5 py-0.5 font-tsp16-sans font-semibold text-rose-700">High risk</span><time datetime="2026-10-07T02:48">2:48 AM</time><span>81.2.••.•• · Edge / Windows</span></span></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-2 size-4 text-tsp16-mut transition group-open/ev:rotate-180"><path d="m6 9 6 6 6-6"/></svg></summary><div class="px-4 pb-4 sm:pl-17 sm:pr-5"><pre class="overflow-x-auto rounded-xl bg-tsp16-ink p-4 font-tsp16-mono text-xs leading-relaxed text-white/70"><span class="block">  "method": "password + totp",</span><span class="block">  "previous_country": "US",</span><span class="block bg-amber-500/15 text-amber-300">! "country": "GB"   flagged: new_location</span></pre></div></details></li>
        </ul>
      </section>

      <section class="grid gap-3 group-has-[#tsp-16-risk:checked]/log:[&:not(:has([data-risk]))]:hidden group-has-[#tsp-16-f-auth:checked]/log:[&:not(:has([data-cat=auth]))]:hidden group-has-[#tsp-16-f-members:checked]/log:[&:not(:has([data-cat=members]))]:hidden group-has-[#tsp-16-f-billing:checked]/log:[&:not(:has([data-cat=billing]))]:hidden group-has-[#tsp-16-f-security:checked]/log:[&:not(:has([data-cat=security]))]:hidden group-has-[#tsp-16-f-api:checked]/log:[&:not(:has([data-cat=api]))]:hidden" aria-labelledby="tsp-16-d2">
        <h2 id="tsp-16-d2" class="text-xs font-semibold uppercase tracking-[0.14em] text-tsp16-mut">Yesterday · Oct 6</h2>
        <ul class="divide-y divide-tsp16-line overflow-hidden rounded-2xl border border-tsp16-line bg-white">
          <li data-ev data-cat="billing"><details class="group/ev"><summary class="grid min-h-11 cursor-pointer list-none grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 px-4 py-3.5 transition hover:bg-tsp16-bg/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tsp16-acc sm:px-5 [&::-webkit-details-marker]:hidden"><span class="grid size-9 place-items-center rounded-full bg-amber-100 text-xs font-semibold text-amber-700">PS</span><span class="grid gap-1"><span class="text-sm"><strong class="font-semibold">Priya Shah</strong> changed the default payment method to <strong class="font-semibold">Mastercard ••8210</strong></span><span class="flex flex-wrap items-center gap-x-3 gap-y-1 font-tsp16-mono text-xs text-tsp16-mut"><span class="rounded bg-violet-50 px-1.5 py-0.5 font-tsp16-sans font-semibold text-violet-700">Billing</span><time datetime="2026-10-06T16:20">4:20 PM</time><span>24.6.••.•• · Safari / macOS</span></span></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-2 size-4 text-tsp16-mut transition group-open/ev:rotate-180"><path d="m6 9 6 6 6-6"/></svg></summary><div class="px-4 pb-4 sm:pl-17 sm:pr-5"><pre class="overflow-x-auto rounded-xl bg-tsp16-ink p-4 font-tsp16-mono text-xs leading-relaxed text-white/70"><span class="block bg-rose-500/15 text-rose-300">- "default_method": "visa_4242"</span><span class="block bg-emerald-500/15 text-emerald-300">+ "default_method": "mc_8210"</span></pre></div></details></li>
          <li data-ev data-cat="members"><details class="group/ev"><summary class="grid min-h-11 cursor-pointer list-none grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 px-4 py-3.5 transition hover:bg-tsp16-bg/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tsp16-acc sm:px-5 [&::-webkit-details-marker]:hidden"><span class="grid size-9 place-items-center rounded-full bg-rose-100 text-xs font-semibold text-rose-700">MC</span><span class="grid gap-1"><span class="text-sm"><strong class="font-semibold">Mia Chen</strong> invited <strong class="font-semibold">dana@northwind.co</strong> as Member</span><span class="flex flex-wrap items-center gap-x-3 gap-y-1 font-tsp16-mono text-xs text-tsp16-mut"><span class="rounded bg-sky-50 px-1.5 py-0.5 font-tsp16-sans font-semibold text-sky-700">Members</span><time datetime="2026-10-06T11:03">11:03 AM</time><span>73.15.••.•• · Chrome / macOS</span></span></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-2 size-4 text-tsp16-mut transition group-open/ev:rotate-180"><path d="m6 9 6 6 6-6"/></svg></summary><div class="px-4 pb-4 sm:pl-17 sm:pr-5"><pre class="overflow-x-auto rounded-xl bg-tsp16-ink p-4 font-tsp16-mono text-xs leading-relaxed text-white/70"><span class="block bg-emerald-500/15 text-emerald-300">+ "invite": "dana@northwind.co"</span><span class="block bg-emerald-500/15 text-emerald-300">+ "role": "member", "expires": "2026-10-13"</span></pre></div></details></li>
          <li data-ev data-cat="auth" data-risk><details class="group/ev"><summary class="grid min-h-11 cursor-pointer list-none grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 px-4 py-3.5 transition hover:bg-tsp16-bg/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tsp16-acc sm:px-5 [&::-webkit-details-marker]:hidden"><span class="grid size-9 place-items-center rounded-full bg-zinc-200 text-zinc-600"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/></svg></span><span class="grid gap-1"><span class="text-sm"><strong class="font-semibold">5 failed sign-ins</strong> for <strong class="font-semibold">omar@northwind.co</strong> — account locked for 15 minutes</span><span class="flex flex-wrap items-center gap-x-3 gap-y-1 font-tsp16-mono text-xs text-tsp16-mut"><span class="rounded bg-emerald-50 px-1.5 py-0.5 font-tsp16-sans font-semibold text-emerald-700">Sign-in</span><span class="rounded bg-rose-50 px-1.5 py-0.5 font-tsp16-sans font-semibold text-rose-700">High risk</span><time datetime="2026-10-06T03:31">3:31 AM</time><span>185.220.••.•• · unknown</span></span></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-2 size-4 text-tsp16-mut transition group-open/ev:rotate-180"><path d="m6 9 6 6 6-6"/></svg></summary><div class="px-4 pb-4 sm:pl-17 sm:pr-5"><pre class="overflow-x-auto rounded-xl bg-tsp16-ink p-4 font-tsp16-mono text-xs leading-relaxed text-white/70"><span class="block">  "attempts": 5, "window": "4m 12s",</span><span class="block bg-amber-500/15 text-amber-300">! "action": "lockout_15m"</span><span class="block">  "source_asn": "AS60729 (Tor exit)"</span></pre></div></details></li>
        </ul>
      </section>

      <section class="grid gap-3 group-has-[#tsp-16-risk:checked]/log:[&:not(:has([data-risk]))]:hidden group-has-[#tsp-16-f-auth:checked]/log:[&:not(:has([data-cat=auth]))]:hidden group-has-[#tsp-16-f-members:checked]/log:[&:not(:has([data-cat=members]))]:hidden group-has-[#tsp-16-f-billing:checked]/log:[&:not(:has([data-cat=billing]))]:hidden group-has-[#tsp-16-f-security:checked]/log:[&:not(:has([data-cat=security]))]:hidden group-has-[#tsp-16-f-api:checked]/log:[&:not(:has([data-cat=api]))]:hidden" aria-labelledby="tsp-16-d3">
        <h2 id="tsp-16-d3" class="text-xs font-semibold uppercase tracking-[0.14em] text-tsp16-mut">Oct 3</h2>
        <ul class="divide-y divide-tsp16-line overflow-hidden rounded-2xl border border-tsp16-line bg-white">
          <li data-ev data-cat="billing"><details class="group/ev"><summary class="grid min-h-11 cursor-pointer list-none grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 px-4 py-3.5 transition hover:bg-tsp16-bg/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tsp16-acc sm:px-5 [&::-webkit-details-marker]:hidden"><span class="grid size-9 place-items-center rounded-full bg-teal-100 text-xs font-semibold text-teal-700">AM</span><span class="grid gap-1"><span class="text-sm"><strong class="font-semibold">Ava Mitchell</strong> added a seat — Pro plan now <strong class="font-semibold">12 seats</strong></span><span class="flex flex-wrap items-center gap-x-3 gap-y-1 font-tsp16-mono text-xs text-tsp16-mut"><span class="rounded bg-violet-50 px-1.5 py-0.5 font-tsp16-sans font-semibold text-violet-700">Billing</span><time datetime="2026-10-03T14:10">2:10 PM</time><span>73.15.••.•• · Chrome / macOS</span></span></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-2 size-4 text-tsp16-mut transition group-open/ev:rotate-180"><path d="m6 9 6 6 6-6"/></svg></summary><div class="px-4 pb-4 sm:pl-17 sm:pr-5"><pre class="overflow-x-auto rounded-xl bg-tsp16-ink p-4 font-tsp16-mono text-xs leading-relaxed text-white/70"><span class="block bg-rose-500/15 text-rose-300">- "seats": 11</span><span class="block bg-emerald-500/15 text-emerald-300">+ "seats": 12</span><span class="block">  "proration": "$9.60"</span></pre></div></details></li>
          <li data-ev data-cat="api"><details class="group/ev"><summary class="grid min-h-11 cursor-pointer list-none grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 px-4 py-3.5 transition hover:bg-tsp16-bg/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tsp16-acc sm:px-5 [&::-webkit-details-marker]:hidden"><span class="grid size-9 place-items-center rounded-full bg-violet-100 text-xs font-semibold text-violet-700">NP</span><span class="grid gap-1"><span class="text-sm"><strong class="font-semibold">Noah Patel</strong> added webhook endpoint <span class="rounded bg-tsp16-bg px-1 font-tsp16-mono text-[13px]">api.northwind.co/hooks/billing</span></span><span class="flex flex-wrap items-center gap-x-3 gap-y-1 font-tsp16-mono text-xs text-tsp16-mut"><span class="rounded bg-indigo-50 px-1.5 py-0.5 font-tsp16-sans font-semibold text-indigo-700">API</span><time datetime="2026-10-03T10:55">10:55 AM</time><span>98.42.••.•• · Firefox / Linux</span></span></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-2 size-4 text-tsp16-mut transition group-open/ev:rotate-180"><path d="m6 9 6 6 6-6"/></svg></summary><div class="px-4 pb-4 sm:pl-17 sm:pr-5"><pre class="overflow-x-auto rounded-xl bg-tsp16-ink p-4 font-tsp16-mono text-xs leading-relaxed text-white/70"><span class="block bg-emerald-500/15 text-emerald-300">+ "events": ["invoice.paid", "invoice.failed"]</span><span class="block bg-emerald-500/15 text-emerald-300">+ "enabled": true</span></pre></div></details></li>
        </ul>
      </section>
    </div>
    <p class="text-center text-sm text-tsp16-mut">Showing the last 7 days · <a href="#tsp-16-h" class="font-semibold text-tsp16-acc underline-offset-4 hover:underline">Load older events</a></p>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tsp16-bg: #f4f6f8;
  --color-tsp16-bg: oklch(0.972 0.005 240);
  --color-tsp16-ink: #121a24;
  --color-tsp16-ink: oklch(0.215 0.025 250);
  --color-tsp16-mut: #5a6573;
  --color-tsp16-mut: oklch(0.51 0.025 250);
  --color-tsp16-line: #e1e6ec;
  --color-tsp16-line: oklch(0.928 0.01 250);
  --color-tsp16-acc: #0369a1;
  --color-tsp16-acc: oklch(0.5 0.119 242);
  --font-tsp16-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-tsp16-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

.tsp-16 {
  width: 100%;
  min-height: 100svh;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tsp16-bg: #f4f6f8;
  --color-tsp16-bg: oklch(0.972 0.005 240);
  --color-tsp16-ink: #121a24;
  --color-tsp16-ink: oklch(0.215 0.025 250);
  --color-tsp16-mut: #5a6573;
  --color-tsp16-mut: oklch(0.51 0.025 250);
  --color-tsp16-line: #e1e6ec;
  --color-tsp16-line: oklch(0.928 0.01 250);
  --color-tsp16-acc: #0369a1;
  --color-tsp16-acc: oklch(0.5 0.119 242);
  --font-tsp16-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-tsp16-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

.tsp-16 {
  width: 100%;
  min-height: 100svh;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • The CSS original's chip filter rules became stacked group-has-[…]/log:[&_[data-ev]:not(…)]:hidden variants on the list, and day groups gained their own [&:not(:has(…))]:hidden so empty headings vanish.
  • Expand/collapse is native <details> with group-open/ev:rotate-180 on the chevron — still zero JavaScript.
  • UI upgrade from the CSS original: every event expands into a red/green JSON diff, with amber '!' lines for flagged signals.
  • UI upgrade: a 'High-risk only' switch, risk badges, masked IPs with device and browser, and a retention note on the plan.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Audit Log Activity Page
Source: https://codefronts.com/layouts/tailwind-css-settings-pages/tailwind-audit-log-activity-page/

A zero-JavaScript audit trail grouped by day: who did what, to what, from where — with category chips and a 'High-risk only' switch that filter in pure CSS, empty day headings that hide themselves, and every event expanding into a red/green JSON diff of exactly what changed.
## HTML
```html
<section class="tsp-16 group/log w-full min-h-svh bg-tsp16-bg px-4 py-10 font-tsp16-sans text-tsp16-ink antialiased sm:px-8 sm:py-14" aria-labelledby="tsp-16-h">
  <div class="mx-auto grid w-full max-w-5xl gap-6">
    <header class="flex flex-wrap items-end justify-between gap-4">
      <div><h1 id="tsp-16-h" class="text-3xl font-semibold tracking-tight">Audit log</h1><p class="mt-1 text-tsp16-mut">Every change in the Northwind workspace · kept for 12 months on Business.</p></div>
      <a href="#tsp-16-h" class="inline-flex min-h-11 items-center gap-2 rounded-xl border border-tsp16-line bg-white px-4 text-sm font-semibold shadow-xs transition hover:bg-tsp16-bg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tsp16-acc"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M12 3v12M7 10l5 5 5-5M5 21h14"/></svg>Export CSV</a>
    </header>

    <div class="flex flex-wrap items-center justify-between gap-3">
      <fieldset class="flex flex-wrap gap-2">
        <legend class="sr-only">Filter by category</legend>
        <label class="inline-flex min-h-11 cursor-pointer items-center rounded-full border border-tsp16-line bg-white px-4 text-sm font-medium text-tsp16-mut transition hover:text-tsp16-ink has-checked:border-transparent has-checked:bg-tsp16-ink has-checked:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp16-acc"><input type="radio" name="tsp-16-f" id="tsp-16-f-all" class="sr-only" checked>All</label>
        <label class="inline-flex min-h-11 cursor-pointer items-center rounded-full border border-tsp16-line bg-white px-4 text-sm font-medium text-tsp16-mut transition hover:text-tsp16-ink has-checked:border-transparent has-checked:bg-tsp16-ink has-checked:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp16-acc"><input type="radio" name="tsp-16-f" id="tsp-16-f-auth" class="sr-only">Sign-in</label>
        <label class="inline-flex min-h-11 cursor-pointer items-center rounded-full border border-tsp16-line bg-white px-4 text-sm font-medium text-tsp16-mut transition hover:text-tsp16-ink has-checked:border-transparent has-checked:bg-tsp16-ink has-checked:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp16-acc"><input type="radio" name="tsp-16-f" id="tsp-16-f-members" class="sr-only">Members</label>
        <label class="inline-flex min-h-11 cursor-pointer items-center rounded-full border border-tsp16-line bg-white px-4 text-sm font-medium text-tsp16-mut transition hover:text-tsp16-ink has-checked:border-transparent has-checked:bg-tsp16-ink has-checked:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp16-acc"><input type="radio" name="tsp-16-f" id="tsp-16-f-billing" class="sr-only">Billing</label>
        <label class="inline-flex min-h-11 cursor-pointer items-center rounded-full border border-tsp16-line bg-white px-4 text-sm font-medium text-tsp16-mut transition hover:text-tsp16-ink has-checked:border-transparent has-checked:bg-tsp16-ink has-checked:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp16-acc"><input type="radio" name="tsp-16-f" id="tsp-16-f-security" class="sr-only">Security</label>
        <label class="inline-flex min-h-11 cursor-pointer items-center rounded-full border border-tsp16-line bg-white px-4 text-sm font-medium text-tsp16-mut transition hover:text-tsp16-ink has-checked:border-transparent has-checked:bg-tsp16-ink has-checked:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-tsp16-acc"><input type="radio" name="tsp-16-f" id="tsp-16-f-api" class="sr-only">API</label>
      </fieldset>
      <label class="flex min-h-11 cursor-pointer items-center gap-3 text-sm font-medium"><span class="relative"><input id="tsp-16-risk" type="checkbox" role="switch" class="peer sr-only"><span class="block h-6 w-11 rounded-full bg-zinc-300 transition peer-checked:bg-rose-600 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-tsp16-acc"></span><span class="pointer-events-none absolute left-0.5 top-0.5 size-5 rounded-full bg-white shadow-sm transition peer-checked:translate-x-5"></span></span>High-risk only</label>
    </div>

    <div class="grid gap-6 [&_[data-ev]]:transition group-has-[#tsp-16-risk:checked]/log:[&_[data-ev]:not([data-risk])]:hidden group-has-[#tsp-16-f-auth:checked]/log:[&_[data-ev]:not([data-cat=auth])]:hidden group-has-[#tsp-16-f-members:checked]/log:[&_[data-ev]:not([data-cat=members])]:hidden group-has-[#tsp-16-f-billing:checked]/log:[&_[data-ev]:not([data-cat=billing])]:hidden group-has-[#tsp-16-f-security:checked]/log:[&_[data-ev]:not([data-cat=security])]:hidden group-has-[#tsp-16-f-api:checked]/log:[&_[data-ev]:not([data-cat=api])]:hidden">

      <section class="grid gap-3 group-has-[#tsp-16-risk:checked]/log:[&:not(:has([data-risk]))]:hidden group-has-[#tsp-16-f-auth:checked]/log:[&:not(:has([data-cat=auth]))]:hidden group-has-[#tsp-16-f-members:checked]/log:[&:not(:has([data-cat=members]))]:hidden group-has-[#tsp-16-f-billing:checked]/log:[&:not(:has([data-cat=billing]))]:hidden group-has-[#tsp-16-f-security:checked]/log:[&:not(:has([data-cat=security]))]:hidden group-has-[#tsp-16-f-api:checked]/log:[&:not(:has([data-cat=api]))]:hidden" aria-labelledby="tsp-16-d1">
        <h2 id="tsp-16-d1" class="text-xs font-semibold uppercase tracking-[0.14em] text-tsp16-mut">Today · Oct 7</h2>
        <ul class="divide-y divide-tsp16-line overflow-hidden rounded-2xl border border-tsp16-line bg-white">
          <li data-ev data-cat="members"><details class="group/ev"><summary class="grid min-h-11 cursor-pointer list-none grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 px-4 py-3.5 transition hover:bg-tsp16-bg/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tsp16-acc sm:px-5 [&::-webkit-details-marker]:hidden"><span class="grid size-9 place-items-center rounded-full bg-violet-100 text-xs font-semibold text-violet-700">NP</span><span class="grid gap-1"><span class="text-sm"><strong class="font-semibold">Noah Patel</strong> changed <strong class="font-semibold">Leo Martins</strong>' role to <span class="rounded bg-tsp16-bg px-1 font-tsp16-mono text-[13px]">admin</span></span><span class="flex flex-wrap items-center gap-x-3 gap-y-1 font-tsp16-mono text-xs text-tsp16-mut"><span class="rounded bg-sky-50 px-1.5 py-0.5 font-tsp16-sans font-semibold text-sky-700">Members</span><time datetime="2026-10-07T10:42">10:42 AM</time><span>73.15.••.•• · Chrome / macOS</span></span></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-2 size-4 text-tsp16-mut transition group-open/ev:rotate-180"><path d="m6 9 6 6 6-6"/></svg></summary><div class="px-4 pb-4 sm:pl-17 sm:pr-5"><pre class="overflow-x-auto rounded-xl bg-tsp16-ink p-4 font-tsp16-mono text-xs leading-relaxed text-white/70"><span class="block">  "member": "leo@northwind.co",</span><span class="block bg-rose-500/15 text-rose-300">- "role": "member"</span><span class="block bg-emerald-500/15 text-emerald-300">+ "role": "admin"</span><span class="block">  "request_id": "req_8Fk2…"</span></pre></div></details></li>
          <li data-ev data-cat="security" data-risk><details class="group/ev"><summary class="grid min-h-11 cursor-pointer list-none grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 px-4 py-3.5 transition hover:bg-tsp16-bg/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tsp16-acc sm:px-5 [&::-webkit-details-marker]:hidden"><span class="grid size-9 place-items-center rounded-full bg-teal-100 text-xs font-semibold text-teal-700">AM</span><span class="grid gap-1"><span class="text-sm"><strong class="font-semibold">Ava Mitchell</strong> required two-factor authentication for <strong class="font-semibold">all members</strong></span><span class="flex flex-wrap items-center gap-x-3 gap-y-1 font-tsp16-mono text-xs text-tsp16-mut"><span class="rounded bg-amber-50 px-1.5 py-0.5 font-tsp16-sans font-semibold text-amber-800">Security</span><span class="rounded bg-rose-50 px-1.5 py-0.5 font-tsp16-sans font-semibold text-rose-700">High risk</span><time datetime="2026-10-07T09:15">9:15 AM</time><span>73.15.••.•• · Chrome / macOS</span></span></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-2 size-4 text-tsp16-mut transition group-open/ev:rotate-180"><path d="m6 9 6 6 6-6"/></svg></summary><div class="px-4 pb-4 sm:pl-17 sm:pr-5"><pre class="overflow-x-auto rounded-xl bg-tsp16-ink p-4 font-tsp16-mono text-xs leading-relaxed text-white/70"><span class="block bg-rose-500/15 text-rose-300">- "require_2fa": false</span><span class="block bg-emerald-500/15 text-emerald-300">+ "require_2fa": true</span><span class="block bg-emerald-500/15 text-emerald-300">+ "grace_period_days": 7</span></pre></div></details></li>
          <li data-ev data-cat="api"><details class="group/ev"><summary class="grid min-h-11 cursor-pointer list-none grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 px-4 py-3.5 transition hover:bg-tsp16-bg/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tsp16-acc sm:px-5 [&::-webkit-details-marker]:hidden"><span class="grid size-9 place-items-center rounded-full bg-violet-100 text-xs font-semibold text-violet-700">NP</span><span class="grid gap-1"><span class="text-sm"><strong class="font-semibold">Noah Patel</strong> created API key <strong class="font-semibold">CI pipeline</strong> with scope <span class="rounded bg-tsp16-bg px-1 font-tsp16-mono text-[13px]">read</span></span><span class="flex flex-wrap items-center gap-x-3 gap-y-1 font-tsp16-mono text-xs text-tsp16-mut"><span class="rounded bg-indigo-50 px-1.5 py-0.5 font-tsp16-sans font-semibold text-indigo-700">API</span><time datetime="2026-10-07T08:02">8:02 AM</time><span>98.42.••.•• · Firefox / Linux</span></span></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-2 size-4 text-tsp16-mut transition group-open/ev:rotate-180"><path d="m6 9 6 6 6-6"/></svg></summary><div class="px-4 pb-4 sm:pl-17 sm:pr-5"><pre class="overflow-x-auto rounded-xl bg-tsp16-ink p-4 font-tsp16-mono text-xs leading-relaxed text-white/70"><span class="block bg-emerald-500/15 text-emerald-300">+ "key_id": "key_01J7KM71bc"</span><span class="block bg-emerald-500/15 text-emerald-300">+ "env": "live", "scopes": ["read"]</span><span class="block bg-emerald-500/15 text-emerald-300">+ "expires_at": "2027-01-05"</span></pre></div></details></li>
          <li data-ev data-cat="auth" data-risk><details class="group/ev"><summary class="grid min-h-11 cursor-pointer list-none grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 px-4 py-3.5 transition hover:bg-tsp16-bg/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tsp16-acc sm:px-5 [&::-webkit-details-marker]:hidden"><span class="grid size-9 place-items-center rounded-full bg-teal-100 text-xs font-semibold text-teal-700">AM</span><span class="grid gap-1"><span class="text-sm"><strong class="font-semibold">Ava Mitchell</strong> signed in from a <strong class="font-semibold">new location</strong> — London, UK</span><span class="flex flex-wrap items-center gap-x-3 gap-y-1 font-tsp16-mono text-xs text-tsp16-mut"><span class="rounded bg-emerald-50 px-1.5 py-0.5 font-tsp16-sans font-semibold text-emerald-700">Sign-in</span><span class="rounded bg-rose-50 px-1.5 py-0.5 font-tsp16-sans font-semibold text-rose-700">High risk</span><time datetime="2026-10-07T02:48">2:48 AM</time><span>81.2.••.•• · Edge / Windows</span></span></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-2 size-4 text-tsp16-mut transition group-open/ev:rotate-180"><path d="m6 9 6 6 6-6"/></svg></summary><div class="px-4 pb-4 sm:pl-17 sm:pr-5"><pre class="overflow-x-auto rounded-xl bg-tsp16-ink p-4 font-tsp16-mono text-xs leading-relaxed text-white/70"><span class="block">  "method": "password + totp",</span><span class="block">  "previous_country": "US",</span><span class="block bg-amber-500/15 text-amber-300">! "country": "GB"   flagged: new_location</span></pre></div></details></li>
        </ul>
      </section>

      <section class="grid gap-3 group-has-[#tsp-16-risk:checked]/log:[&:not(:has([data-risk]))]:hidden group-has-[#tsp-16-f-auth:checked]/log:[&:not(:has([data-cat=auth]))]:hidden group-has-[#tsp-16-f-members:checked]/log:[&:not(:has([data-cat=members]))]:hidden group-has-[#tsp-16-f-billing:checked]/log:[&:not(:has([data-cat=billing]))]:hidden group-has-[#tsp-16-f-security:checked]/log:[&:not(:has([data-cat=security]))]:hidden group-has-[#tsp-16-f-api:checked]/log:[&:not(:has([data-cat=api]))]:hidden" aria-labelledby="tsp-16-d2">
        <h2 id="tsp-16-d2" class="text-xs font-semibold uppercase tracking-[0.14em] text-tsp16-mut">Yesterday · Oct 6</h2>
        <ul class="divide-y divide-tsp16-line overflow-hidden rounded-2xl border border-tsp16-line bg-white">
          <li data-ev data-cat="billing"><details class="group/ev"><summary class="grid min-h-11 cursor-pointer list-none grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 px-4 py-3.5 transition hover:bg-tsp16-bg/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tsp16-acc sm:px-5 [&::-webkit-details-marker]:hidden"><span class="grid size-9 place-items-center rounded-full bg-amber-100 text-xs font-semibold text-amber-700">PS</span><span class="grid gap-1"><span class="text-sm"><strong class="font-semibold">Priya Shah</strong> changed the default payment method to <strong class="font-semibold">Mastercard ••8210</strong></span><span class="flex flex-wrap items-center gap-x-3 gap-y-1 font-tsp16-mono text-xs text-tsp16-mut"><span class="rounded bg-violet-50 px-1.5 py-0.5 font-tsp16-sans font-semibold text-violet-700">Billing</span><time datetime="2026-10-06T16:20">4:20 PM</time><span>24.6.••.•• · Safari / macOS</span></span></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-2 size-4 text-tsp16-mut transition group-open/ev:rotate-180"><path d="m6 9 6 6 6-6"/></svg></summary><div class="px-4 pb-4 sm:pl-17 sm:pr-5"><pre class="overflow-x-auto rounded-xl bg-tsp16-ink p-4 font-tsp16-mono text-xs leading-relaxed text-white/70"><span class="block bg-rose-500/15 text-rose-300">- "default_method": "visa_4242"</span><span class="block bg-emerald-500/15 text-emerald-300">+ "default_method": "mc_8210"</span></pre></div></details></li>
          <li data-ev data-cat="members"><details class="group/ev"><summary class="grid min-h-11 cursor-pointer list-none grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 px-4 py-3.5 transition hover:bg-tsp16-bg/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tsp16-acc sm:px-5 [&::-webkit-details-marker]:hidden"><span class="grid size-9 place-items-center rounded-full bg-rose-100 text-xs font-semibold text-rose-700">MC</span><span class="grid gap-1"><span class="text-sm"><strong class="font-semibold">Mia Chen</strong> invited <strong class="font-semibold">dana@northwind.co</strong> as Member</span><span class="flex flex-wrap items-center gap-x-3 gap-y-1 font-tsp16-mono text-xs text-tsp16-mut"><span class="rounded bg-sky-50 px-1.5 py-0.5 font-tsp16-sans font-semibold text-sky-700">Members</span><time datetime="2026-10-06T11:03">11:03 AM</time><span>73.15.••.•• · Chrome / macOS</span></span></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-2 size-4 text-tsp16-mut transition group-open/ev:rotate-180"><path d="m6 9 6 6 6-6"/></svg></summary><div class="px-4 pb-4 sm:pl-17 sm:pr-5"><pre class="overflow-x-auto rounded-xl bg-tsp16-ink p-4 font-tsp16-mono text-xs leading-relaxed text-white/70"><span class="block bg-emerald-500/15 text-emerald-300">+ "invite": "dana@northwind.co"</span><span class="block bg-emerald-500/15 text-emerald-300">+ "role": "member", "expires": "2026-10-13"</span></pre></div></details></li>
          <li data-ev data-cat="auth" data-risk><details class="group/ev"><summary class="grid min-h-11 cursor-pointer list-none grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 px-4 py-3.5 transition hover:bg-tsp16-bg/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tsp16-acc sm:px-5 [&::-webkit-details-marker]:hidden"><span class="grid size-9 place-items-center rounded-full bg-zinc-200 text-zinc-600"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/></svg></span><span class="grid gap-1"><span class="text-sm"><strong class="font-semibold">5 failed sign-ins</strong> for <strong class="font-semibold">omar@northwind.co</strong> — account locked for 15 minutes</span><span class="flex flex-wrap items-center gap-x-3 gap-y-1 font-tsp16-mono text-xs text-tsp16-mut"><span class="rounded bg-emerald-50 px-1.5 py-0.5 font-tsp16-sans font-semibold text-emerald-700">Sign-in</span><span class="rounded bg-rose-50 px-1.5 py-0.5 font-tsp16-sans font-semibold text-rose-700">High risk</span><time datetime="2026-10-06T03:31">3:31 AM</time><span>185.220.••.•• · unknown</span></span></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-2 size-4 text-tsp16-mut transition group-open/ev:rotate-180"><path d="m6 9 6 6 6-6"/></svg></summary><div class="px-4 pb-4 sm:pl-17 sm:pr-5"><pre class="overflow-x-auto rounded-xl bg-tsp16-ink p-4 font-tsp16-mono text-xs leading-relaxed text-white/70"><span class="block">  "attempts": 5, "window": "4m 12s",</span><span class="block bg-amber-500/15 text-amber-300">! "action": "lockout_15m"</span><span class="block">  "source_asn": "AS60729 (Tor exit)"</span></pre></div></details></li>
        </ul>
      </section>

      <section class="grid gap-3 group-has-[#tsp-16-risk:checked]/log:[&:not(:has([data-risk]))]:hidden group-has-[#tsp-16-f-auth:checked]/log:[&:not(:has([data-cat=auth]))]:hidden group-has-[#tsp-16-f-members:checked]/log:[&:not(:has([data-cat=members]))]:hidden group-has-[#tsp-16-f-billing:checked]/log:[&:not(:has([data-cat=billing]))]:hidden group-has-[#tsp-16-f-security:checked]/log:[&:not(:has([data-cat=security]))]:hidden group-has-[#tsp-16-f-api:checked]/log:[&:not(:has([data-cat=api]))]:hidden" aria-labelledby="tsp-16-d3">
        <h2 id="tsp-16-d3" class="text-xs font-semibold uppercase tracking-[0.14em] text-tsp16-mut">Oct 3</h2>
        <ul class="divide-y divide-tsp16-line overflow-hidden rounded-2xl border border-tsp16-line bg-white">
          <li data-ev data-cat="billing"><details class="group/ev"><summary class="grid min-h-11 cursor-pointer list-none grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 px-4 py-3.5 transition hover:bg-tsp16-bg/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tsp16-acc sm:px-5 [&::-webkit-details-marker]:hidden"><span class="grid size-9 place-items-center rounded-full bg-teal-100 text-xs font-semibold text-teal-700">AM</span><span class="grid gap-1"><span class="text-sm"><strong class="font-semibold">Ava Mitchell</strong> added a seat — Pro plan now <strong class="font-semibold">12 seats</strong></span><span class="flex flex-wrap items-center gap-x-3 gap-y-1 font-tsp16-mono text-xs text-tsp16-mut"><span class="rounded bg-violet-50 px-1.5 py-0.5 font-tsp16-sans font-semibold text-violet-700">Billing</span><time datetime="2026-10-03T14:10">2:10 PM</time><span>73.15.••.•• · Chrome / macOS</span></span></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-2 size-4 text-tsp16-mut transition group-open/ev:rotate-180"><path d="m6 9 6 6 6-6"/></svg></summary><div class="px-4 pb-4 sm:pl-17 sm:pr-5"><pre class="overflow-x-auto rounded-xl bg-tsp16-ink p-4 font-tsp16-mono text-xs leading-relaxed text-white/70"><span class="block bg-rose-500/15 text-rose-300">- "seats": 11</span><span class="block bg-emerald-500/15 text-emerald-300">+ "seats": 12</span><span class="block">  "proration": "$9.60"</span></pre></div></details></li>
          <li data-ev data-cat="api"><details class="group/ev"><summary class="grid min-h-11 cursor-pointer list-none grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 px-4 py-3.5 transition hover:bg-tsp16-bg/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tsp16-acc sm:px-5 [&::-webkit-details-marker]:hidden"><span class="grid size-9 place-items-center rounded-full bg-violet-100 text-xs font-semibold text-violet-700">NP</span><span class="grid gap-1"><span class="text-sm"><strong class="font-semibold">Noah Patel</strong> added webhook endpoint <span class="rounded bg-tsp16-bg px-1 font-tsp16-mono text-[13px]">api.northwind.co/hooks/billing</span></span><span class="flex flex-wrap items-center gap-x-3 gap-y-1 font-tsp16-mono text-xs text-tsp16-mut"><span class="rounded bg-indigo-50 px-1.5 py-0.5 font-tsp16-sans font-semibold text-indigo-700">API</span><time datetime="2026-10-03T10:55">10:55 AM</time><span>98.42.••.•• · Firefox / Linux</span></span></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-2 size-4 text-tsp16-mut transition group-open/ev:rotate-180"><path d="m6 9 6 6 6-6"/></svg></summary><div class="px-4 pb-4 sm:pl-17 sm:pr-5"><pre class="overflow-x-auto rounded-xl bg-tsp16-ink p-4 font-tsp16-mono text-xs leading-relaxed text-white/70"><span class="block bg-emerald-500/15 text-emerald-300">+ "events": ["invoice.paid", "invoice.failed"]</span><span class="block bg-emerald-500/15 text-emerald-300">+ "enabled": true</span></pre></div></details></li>
        </ul>
      </section>
    </div>
    <p class="text-center text-sm text-tsp16-mut">Showing the last 7 days · <a href="#tsp-16-h" class="font-semibold text-tsp16-acc underline-offset-4 hover:underline">Load older events</a></p>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tsp16-bg: #f4f6f8;
  --color-tsp16-bg: oklch(0.972 0.005 240);
  --color-tsp16-ink: #121a24;
  --color-tsp16-ink: oklch(0.215 0.025 250);
  --color-tsp16-mut: #5a6573;
  --color-tsp16-mut: oklch(0.51 0.025 250);
  --color-tsp16-line: #e1e6ec;
  --color-tsp16-line: oklch(0.928 0.01 250);
  --color-tsp16-acc: #0369a1;
  --color-tsp16-acc: oklch(0.5 0.119 242);
  --font-tsp16-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-tsp16-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

.tsp-16 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Two filters, both form controls. Category chips are a radio group; 'High-risk only' is a checkbox. Each event carries data-cat and, if sensitive, data-risk. The day list holds one stacked variant per category that hides non-matching events, and each day group hides itself when it contains no event of the chosen category — so you never see an orphaned 'Yesterday' heading.

Detail on demand. Each event is a <details>; the summary is the human sentence and metadata, the body is a monospace before/after diff with removed lines in red and added lines in green. Keyboard and screen readers get expand/collapse for free.

Make it yours

  • Add a category: one chip, one hide class on the list and one on each day group.
  • Mark any event sensitive by adding data-risk and the red Risk badge.
  • Stream new events in at the top of 'Today' — the filters apply to them immediately.

Gotchas — read before shipping

  • Audit logs must be immutable server-side; this page only reads them.
  • Day groups hide per category, but combining 'High-risk only' with a category can still leave a heading with no high-risk events — add a server-side count if that matters.
  • Mask IPs and user agents in line with your privacy policy.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

:has() drives every filter. Without it the full log shows and each event still expands.

Techniques used in this demo

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →