Active sessions manager

Create a security settings panel with Tailwind CSS listing active sessions. The header holds a heading, a muted line giving the count of signed-in devices, and a bordered red-toned button reading "Sign out everywhere else". Below, a list of five session rows in a bordered card: each row has a device glyph tile, the device and browser on one line with a small green "This device" pill on the current one, a muted second line giving the IP, city and last-active time, and on the right either a muted "Current" label or a ghost "Sign out" button. Give one row an amber left accent and a small warning line reading that the location is unusual. Under the list, a bordered neutral-50 note explaining that signing out revokes the refresh token immediately and that API keys are unaffected, with a link to the API keys page.

<section class="mx-auto max-w-2xl px-6 py-12">
  <div class="flex flex-wrap items-end justify-between gap-3">
    <div>
      <h1 class="text-xl font-semibold tracking-tight text-neutral-900">Active sessions</h1>
      <p class="mt-1 text-sm text-neutral-500">You are signed in on 5 devices.</p>
    </div>
    <button class="rounded-xl border border-red-200 px-4 py-2 text-sm font-medium text-red-700 transition hover:bg-red-50">Sign out everywhere else</button>
  </div>

  <div class="mt-6 divide-y divide-neutral-100 overflow-hidden rounded-2xl border border-neutral-200 bg-white">
    <div class="flex items-center gap-4 p-5">
      <span class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-neutral-100 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m3 11 9-8 9 8"/><path d="M5 10v10h14V10M9 20v-6h6v6"/></svg></span>
      <div class="min-w-0 flex-1">
        <p class="flex flex-wrap items-center gap-2 text-sm font-medium text-neutral-900">
          MacBook Pro · Chrome 128
          <span class="rounded-full bg-green-100 px-2 py-0.5 text-[10px] font-medium text-green-700">This device</span>
        </p>
        <p class="mt-0.5 text-xs text-neutral-500">84.22.11.7 · Rotterdam, NL · active now</p>
      </div>
      <span class="shrink-0 text-xs text-neutral-400">Current</span>
    </div>

    <div class="flex items-center gap-4 p-5">
      <span class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-neutral-100 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 9 9-9 9-9-9 9-9Z"/><path d="m12 7 5 5-5 5-5-5 5-5Z"/></svg></span>
      <div class="min-w-0 flex-1">
        <p class="text-sm font-medium text-neutral-900">iPhone 15 · Northwind app</p>
        <p class="mt-0.5 text-xs text-neutral-500">84.22.11.7 · Rotterdam, NL · 2 hours ago</p>
      </div>
      <button class="shrink-0 text-xs font-medium text-neutral-600 underline-offset-4 hover:text-neutral-900 hover:underline">Sign out</button>
    </div>

    <div class="relative flex items-center gap-4 p-5 pl-6">
      <span class="absolute inset-y-0 left-0 w-1 bg-amber-400"></span>
      <span class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-amber-50 text-amber-600"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><rect x="4" y="3" width="16" height="7" rx="2"/><rect x="4" y="14" width="16" height="7" rx="2"/><path d="M8 6.5h.01M8 17.5h.01M12 6.5h5M12 17.5h5"/></svg></span>
      <div class="min-w-0 flex-1">
        <p class="text-sm font-medium text-neutral-900">Windows 11 · Firefox 129</p>
        <p class="mt-0.5 text-xs text-neutral-500">203.0.113.44 · Warsaw, PL · 6 hours ago</p>
        <p class="mt-1 text-xs text-amber-700">Unusual location — you have not signed in from Poland before.</p>
      </div>
      <button class="shrink-0 text-xs font-medium text-red-600 underline-offset-4 hover:underline">Sign out</button>
    </div>

    <div class="flex items-center gap-4 p-5">
      <span class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-neutral-100 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><rect x="4" y="3" width="16" height="7" rx="2"/><rect x="4" y="14" width="16" height="7" rx="2"/><path d="M8 6.5h.01M8 17.5h.01M12 6.5h5M12 17.5h5"/></svg></span>
      <div class="min-w-0 flex-1">
        <p class="text-sm font-medium text-neutral-900">Linux · CLI v4.2.1</p>
        <p class="mt-0.5 text-xs text-neutral-500">10.4.8.19 · build runner · yesterday</p>
      </div>
      <button class="shrink-0 text-xs font-medium text-neutral-600 underline-offset-4 hover:text-neutral-900 hover:underline">Sign out</button>
    </div>

    <div class="flex items-center gap-4 p-5">
      <span class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-neutral-100 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 9 5-9 5-9-5 9-5Z"/><path d="m3 12 9 5 9-5M3 16l9 5 9-5"/></svg></span>
      <div class="min-w-0 flex-1">
        <p class="text-sm font-medium text-neutral-900">iPad Air · Safari 18</p>
        <p class="mt-0.5 text-xs text-neutral-500">84.22.11.7 · Rotterdam, NL · 12 days ago</p>
      </div>
      <button class="shrink-0 text-xs font-medium text-neutral-600 underline-offset-4 hover:text-neutral-900 hover:underline">Sign out</button>
    </div>
  </div>

  <p class="mt-4 rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-3 text-xs leading-relaxed text-neutral-500">
    Signing out revokes that device refresh token immediately — it will need the full sign-in flow again. API keys are separate and keep working; manage those on the <a href="#" class="underline underline-offset-2 hover:text-neutral-900">API keys page</a>.
  </p>
</section>