Leaderboard with rank movement

Build a leaderboard with Tailwind CSS. The card header holds a title, a muted line naming the period, and a small segmented control for This week and All time. The list has ten rows divided by hairlines: each row shows the rank as a fixed-width monospaced number, a movement indicator with an up or down arrow in green or red and the number of places moved or a muted dash for no change, an avatar circle with initials, the name in medium weight with a muted team line under it, and the score right-aligned in monospace with a tiny delta beneath. Give the top three rows a subtle tint and a small medal-like coloured dot before the rank. Highlight one row as the current user with a neutral-900 left border and a "You" pill. Under the list, a footer strip showing the current user rank out of the total and a link to the full table.

<section class="mx-auto max-w-2xl px-6 py-14">
  <div class="overflow-hidden rounded-2xl border border-neutral-200 bg-white">
    <div class="flex flex-wrap items-center justify-between gap-3 px-6 py-5">
      <div>
        <h2 class="text-lg font-semibold text-neutral-900">Support leaderboard</h2>
        <p class="mt-0.5 text-sm text-neutral-500">Tickets resolved · 11–17 August</p>
      </div>
      <div class="flex rounded-xl border border-neutral-200 p-1">
        <button class="rounded-lg bg-neutral-900 px-3 py-1.5 text-xs font-medium text-white">This week</button>
        <button class="rounded-lg px-3 py-1.5 text-xs font-medium text-neutral-600">All time</button>
      </div>
    </div>

    <div class="divide-y divide-neutral-100 border-t border-neutral-200">
      <div class="flex items-center gap-4 bg-amber-50/40 px-6 py-3.5">
        <span class="flex w-8 shrink-0 items-center gap-1.5"><span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span><span class="font-mono text-sm text-neutral-900">1</span></span>
        <span class="w-10 shrink-0 text-xs text-green-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"><path d="M14 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg> 2</span>
        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-neutral-900 text-[11px] font-medium text-white">MO</span>
        <span class="min-w-0 flex-1"><span class="block truncate text-sm font-medium text-neutral-900">Mira Osei</span><span class="block text-xs text-neutral-500">Platform</span></span>
        <span class="shrink-0 text-right"><span class="block font-mono text-sm font-medium text-neutral-900">412</span><span class="block text-[11px] text-green-600">+38</span></span>
      </div>

      <div class="flex items-center gap-4 bg-neutral-50/60 px-6 py-3.5">
        <span class="flex w-8 shrink-0 items-center gap-1.5"><span class="h-1.5 w-1.5 rounded-full bg-neutral-400"></span><span class="font-mono text-sm text-neutral-900">2</span></span>
        <span class="w-10 shrink-0 text-xs text-red-600">↘ 1</span>
        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-amber-500 text-[11px] font-medium text-white">JP</span>
        <span class="min-w-0 flex-1"><span class="block truncate text-sm font-medium text-neutral-900">Jules Park</span><span class="block text-xs text-neutral-500">Billing</span></span>
        <span class="shrink-0 text-right"><span class="block font-mono text-sm font-medium text-neutral-900">388</span><span class="block text-[11px] text-neutral-400">+12</span></span>
      </div>

      <div class="flex items-center gap-4 bg-orange-50/40 px-6 py-3.5">
        <span class="flex w-8 shrink-0 items-center gap-1.5"><span class="h-1.5 w-1.5 rounded-full bg-orange-300"></span><span class="font-mono text-sm text-neutral-900">3</span></span>
        <span class="w-10 shrink-0 text-xs text-neutral-300">—</span>
        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-green-600 text-[11px] font-medium text-white">DK</span>
        <span class="min-w-0 flex-1"><span class="block truncate text-sm font-medium text-neutral-900">Dana Køhler</span><span class="block text-xs text-neutral-500">Platform</span></span>
        <span class="shrink-0 text-right"><span class="block font-mono text-sm font-medium text-neutral-900">341</span><span class="block text-[11px] text-green-600">+21</span></span>
      </div>

      <div class="relative flex items-center gap-4 border-l-2 border-neutral-900 bg-neutral-50 px-6 py-3.5">
        <span class="w-8 shrink-0 font-mono text-sm text-neutral-900">4</span>
        <span class="w-10 shrink-0 text-xs text-green-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"><path d="M14 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg> 3</span>
        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-blue-600 text-[11px] font-medium text-white">RM</span>
        <span class="min-w-0 flex-1">
          <span class="flex items-center gap-2"><span class="truncate text-sm font-medium text-neutral-900">Rae Mensah</span><span class="rounded-full bg-neutral-900 px-2 py-0.5 text-[10px] font-medium text-white">You</span></span>
          <span class="block text-xs text-neutral-500">Onboarding</span>
        </span>
        <span class="shrink-0 text-right"><span class="block font-mono text-sm font-medium text-neutral-900">318</span><span class="block text-[11px] text-green-600">+44</span></span>
      </div>

      <div class="flex items-center gap-4 px-6 py-3.5">
        <span class="w-8 shrink-0 font-mono text-sm text-neutral-500">5</span>
        <span class="w-10 shrink-0 text-xs text-red-600">↘ 2</span>
        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-neutral-500 text-[11px] font-medium text-white">TS</span>
        <span class="min-w-0 flex-1"><span class="block truncate text-sm text-neutral-900">Tom Silva</span><span class="block text-xs text-neutral-500">Billing</span></span>
        <span class="shrink-0 text-right"><span class="block font-mono text-sm text-neutral-900">296</span><span class="block text-[11px] text-neutral-400">+4</span></span>
      </div>

      <div class="flex items-center gap-4 px-6 py-3.5">
        <span class="w-8 shrink-0 font-mono text-sm text-neutral-500">6</span>
        <span class="w-10 shrink-0 text-xs text-neutral-300">—</span>
        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-neutral-900 text-[11px] font-medium text-white">LR</span>
        <span class="min-w-0 flex-1"><span class="block truncate text-sm text-neutral-900">Lena Rask</span><span class="block text-xs text-neutral-500">Compliance</span></span>
        <span class="shrink-0 text-right"><span class="block font-mono text-sm text-neutral-900">271</span><span class="block text-[11px] text-neutral-400">+9</span></span>
      </div>

      <div class="flex items-center gap-4 px-6 py-3.5">
        <span class="w-8 shrink-0 font-mono text-sm text-neutral-500">7</span>
        <span class="w-10 shrink-0 text-xs text-green-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"><path d="M14 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg> 1</span>
        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-amber-500 text-[11px] font-medium text-white">RG</span>
        <span class="min-w-0 flex-1"><span class="block truncate text-sm text-neutral-900">Ravi Gopal</span><span class="block text-xs text-neutral-500">Onboarding</span></span>
        <span class="shrink-0 text-right"><span class="block font-mono text-sm text-neutral-900">244</span><span class="block text-[11px] text-green-600">+17</span></span>
      </div>

      <div class="flex items-center gap-4 px-6 py-3.5">
        <span class="w-8 shrink-0 font-mono text-sm text-neutral-500">8</span>
        <span class="w-10 shrink-0 text-xs text-red-600">↘ 4</span>
        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-green-600 text-[11px] font-medium text-white">HB</span>
        <span class="min-w-0 flex-1"><span class="block truncate text-sm text-neutral-900">Hana Brandt</span><span class="block text-xs text-neutral-500">Platform</span></span>
        <span class="shrink-0 text-right"><span class="block font-mono text-sm text-neutral-900">201</span><span class="block text-[11px] text-neutral-400">−6</span></span>
      </div>
    </div>

    <div class="flex flex-wrap items-center justify-between gap-3 border-t border-neutral-200 bg-neutral-50 px-6 py-4">
      <p class="text-sm text-neutral-600">You are <span class="font-medium text-neutral-900">4th of 34</span> — up three places since Monday.</p>
      <a href="#" class="text-sm font-medium text-neutral-900 underline-offset-4 hover:underline">Full table <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="M14 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg></a>
    </div>
  </div>
</section>