Guide library with difficulty tags

Design a guide library with Tailwind CSS. The header has a heading, a subline about learning paths, and a filter row with three level chips — Beginner, Intermediate, Advanced — plus a muted result count on the right. Below, a three-column responsive grid of guide cards: each card is a bordered rounded-xl tile with a small monospaced step count at the top right, a glyph tile, a title, a two-line description, and a footer row separated by a hairline showing a level pill in a tint appropriate to its difficulty and a reading time in muted small text. Include nine guides across the levels. Under the grid, a wide bordered strip suggesting a structured path, with a heading, one line of copy, three numbered mini-steps in a row, and a dark button reading "Start the path".

<section class="mx-auto max-w-6xl px-6 py-16">
  <div class="max-w-2xl">
    <h1 class="text-3xl font-semibold tracking-tight text-neutral-900">Guides</h1>
    <p class="mt-3 text-neutral-500">Written to be worked through, not skimmed. Each one ends with something running.</p>
  </div>

  <div class="mt-8 flex flex-wrap items-center justify-between gap-3">
    <div class="flex flex-wrap gap-2">
      <button class="rounded-full bg-neutral-900 px-3.5 py-1.5 text-xs font-medium text-white">All levels</button>
      <button class="rounded-full border border-neutral-200 px-3.5 py-1.5 text-xs font-medium text-neutral-600 transition hover:bg-neutral-50">Beginner</button>
      <button class="rounded-full border border-neutral-200 px-3.5 py-1.5 text-xs font-medium text-neutral-600 transition hover:bg-neutral-50">Intermediate</button>
      <button class="rounded-full border border-neutral-200 px-3.5 py-1.5 text-xs font-medium text-neutral-600 transition hover:bg-neutral-50">Advanced</button>
    </div>
    <p class="text-xs text-neutral-400">9 guides</p>
  </div>

  <div class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
    <a href="#" class="group flex flex-col rounded-xl border border-neutral-200 bg-white p-5 transition hover:border-neutral-300">
      <div class="flex items-start justify-between">
        <span class="grid h-10 w-10 place-items-center rounded-lg 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="M14 5c2.4-2.4 5.2-2.1 5.2-2.1s.3 2.8-2.1 5.2l-5.6 5.6-4.2-4.2L14 5Z"/><path d="m9 8-4.5.5L3 10l4 1m5 4 1 4 1.5-1.5.5-4.5M7 17c-1 1-3 1-3 1s0-2 1-3"/></svg></span>
        <span class="font-mono text-xs text-neutral-300">4 steps</span>
      </div>
      <h2 class="mt-4 text-sm font-semibold text-neutral-900">Your first connected source</h2>
      <p class="mt-1.5 flex-1 text-sm leading-relaxed text-neutral-500">Connect a warehouse, run a sync, and read the first row that lands.</p>
      <div class="mt-4 flex items-center justify-between border-t border-neutral-100 pt-3">
        <span class="rounded-full bg-green-100 px-2 py-0.5 text-[11px] font-medium text-green-700">Beginner</span>
        <span class="text-xs text-neutral-400">12 min</span>
      </div>
    </a>

    <a href="#" class="group flex flex-col rounded-xl border border-neutral-200 bg-white p-5 transition hover:border-neutral-300">
      <div class="flex items-start justify-between">
        <span class="grid h-10 w-10 place-items-center rounded-lg 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="M4 20V10m5 10V4m6 16v-7m5 7V7"/></svg></span>
        <span class="font-mono text-xs text-neutral-300">6 steps</span>
      </div>
      <h2 class="mt-4 text-sm font-semibold text-neutral-900">Building a dashboard people use</h2>
      <p class="mt-1.5 flex-1 text-sm leading-relaxed text-neutral-500">Choosing the four numbers that matter and refusing the other twenty.</p>
      <div class="mt-4 flex items-center justify-between border-t border-neutral-100 pt-3">
        <span class="rounded-full bg-green-100 px-2 py-0.5 text-[11px] font-medium text-green-700">Beginner</span>
        <span class="text-xs text-neutral-400">18 min</span>
      </div>
    </a>

    <a href="#" class="group flex flex-col rounded-xl border border-neutral-200 bg-white p-5 transition hover:border-neutral-300">
      <div class="flex items-start justify-between">
        <span class="grid h-10 w-10 place-items-center rounded-lg 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="3" y="5" width="18" height="14" rx="2"/><path d="m4 7 8 6 8-6"/></svg></span>
        <span class="font-mono text-xs text-neutral-300">5 steps</span>
      </div>
      <h2 class="mt-4 text-sm font-semibold text-neutral-900">Alerts that do not cry wolf</h2>
      <p class="mt-1.5 flex-1 text-sm leading-relaxed text-neutral-500">Thresholds, windows and the discipline of deleting a noisy alert.</p>
      <div class="mt-4 flex items-center justify-between border-t border-neutral-100 pt-3">
        <span class="rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-medium text-amber-700">Intermediate</span>
        <span class="text-xs text-neutral-400">22 min</span>
      </div>
    </a>

    <a href="#" class="group flex flex-col rounded-xl border border-neutral-200 bg-white p-5 transition hover:border-neutral-300">
      <div class="flex items-start justify-between">
        <span class="grid h-10 w-10 place-items-center rounded-lg 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="m8 9-3 3 3 3m8-6 3 3-3 3m-2-9-4 12"/></svg></span>
        <span class="font-mono text-xs text-neutral-300">7 steps</span>
      </div>
      <h2 class="mt-4 text-sm font-semibold text-neutral-900">Automating reports with the API</h2>
      <p class="mt-1.5 flex-1 text-sm leading-relaxed text-neutral-500">Keys, pagination, retries and a scheduled job you can trust.</p>
      <div class="mt-4 flex items-center justify-between border-t border-neutral-100 pt-3">
        <span class="rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-medium text-amber-700">Intermediate</span>
        <span class="text-xs text-neutral-400">28 min</span>
      </div>
    </a>

    <a href="#" class="group flex flex-col rounded-xl border border-neutral-200 bg-white p-5 transition hover:border-neutral-300">
      <div class="flex items-start justify-between">
        <span class="grid h-10 w-10 place-items-center rounded-lg 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 4.5 6v5.5c0 4.7 3.2 7.7 7.5 9.5 4.3-1.8 7.5-4.8 7.5-9.5V6L12 3Z"/><path d="m9 12 2 2 4-4"/></svg></span>
        <span class="font-mono text-xs text-neutral-300">6 steps</span>
      </div>
      <h2 class="mt-4 text-sm font-semibold text-neutral-900">Row-level access without tears</h2>
      <p class="mt-1.5 flex-1 text-sm leading-relaxed text-neutral-500">Mapping directory groups to rules that survive a reorganisation.</p>
      <div class="mt-4 flex items-center justify-between border-t border-neutral-100 pt-3">
        <span class="rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-medium text-amber-700">Intermediate</span>
        <span class="text-xs text-neutral-400">25 min</span>
      </div>
    </a>

    <a href="#" class="group flex flex-col rounded-xl border border-neutral-200 bg-white p-5 transition hover:border-neutral-300">
      <div class="flex items-start justify-between">
        <span class="grid h-10 w-10 place-items-center rounded-lg 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="M7 7h12m0 0-3-3m3 3-3 3M17 17H5m0 0 3 3m-3-3 3-3"/></svg></span>
        <span class="font-mono text-xs text-neutral-300">9 steps</span>
      </div>
      <h2 class="mt-4 text-sm font-semibold text-neutral-900">Zero-downtime schema migrations</h2>
      <p class="mt-1.5 flex-1 text-sm leading-relaxed text-neutral-500">Expand and contract, with the backfill patterns that survive contact with production.</p>
      <div class="mt-4 flex items-center justify-between border-t border-neutral-100 pt-3">
        <span class="rounded-full bg-red-100 px-2 py-0.5 text-[11px] font-medium text-red-700">Advanced</span>
        <span class="text-xs text-neutral-400">41 min</span>
      </div>
    </a>

    <a href="#" class="group flex flex-col rounded-xl border border-neutral-200 bg-white p-5 transition hover:border-neutral-300">
      <div class="flex items-start justify-between">
        <span class="grid h-10 w-10 place-items-center rounded-lg 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="M4.5 18a9 9 0 1 1 15 0"/><path d="m12 14 4-4"/><path d="M8 18h8"/></svg></span>
        <span class="font-mono text-xs text-neutral-300">8 steps</span>
      </div>
      <h2 class="mt-4 text-sm font-semibold text-neutral-900">Query performance from first principles</h2>
      <p class="mt-1.5 flex-1 text-sm leading-relaxed text-neutral-500">Reading a plan, spotting the wrong join order, and proving the fix worked.</p>
      <div class="mt-4 flex items-center justify-between border-t border-neutral-100 pt-3">
        <span class="rounded-full bg-red-100 px-2 py-0.5 text-[11px] font-medium text-red-700">Advanced</span>
        <span class="text-xs text-neutral-400">36 min</span>
      </div>
    </a>

    <a href="#" class="group flex flex-col rounded-xl border border-neutral-200 bg-white p-5 transition hover:border-neutral-300">
      <div class="flex items-start justify-between">
        <span class="grid h-10 w-10 place-items-center rounded-lg 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>
        <span class="font-mono text-xs text-neutral-300">5 steps</span>
      </div>
      <h2 class="mt-4 text-sm font-semibold text-neutral-900">Self-hosting in your own cluster</h2>
      <p class="mt-1.5 flex-1 text-sm leading-relaxed text-neutral-500">Helm values, secrets management and the upgrade path you will thank yourself for.</p>
      <div class="mt-4 flex items-center justify-between border-t border-neutral-100 pt-3">
        <span class="rounded-full bg-red-100 px-2 py-0.5 text-[11px] font-medium text-red-700">Advanced</span>
        <span class="text-xs text-neutral-400">45 min</span>
      </div>
    </a>

    <a href="#" class="group flex flex-col rounded-xl border border-neutral-200 bg-white p-5 transition hover:border-neutral-300">
      <div class="flex items-start justify-between">
        <span class="grid h-10 w-10 place-items-center rounded-lg 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="3" y="5" width="18" height="4" rx="1"/><path d="M5 9v10h14V9M10 13h4"/></svg></span>
        <span class="font-mono text-xs text-neutral-300">3 steps</span>
      </div>
      <h2 class="mt-4 text-sm font-semibold text-neutral-900">Exporting evidence for an audit</h2>
      <p class="mt-1.5 flex-1 text-sm leading-relaxed text-neutral-500">What auditors actually ask for, and how to produce it in an afternoon.</p>
      <div class="mt-4 flex items-center justify-between border-t border-neutral-100 pt-3">
        <span class="rounded-full bg-green-100 px-2 py-0.5 text-[11px] font-medium text-green-700">Beginner</span>
        <span class="text-xs text-neutral-400">15 min</span>
      </div>
    </a>
  </div>

  <div class="mt-10 flex flex-col gap-6 rounded-2xl border border-neutral-200 bg-neutral-50 p-8 lg:flex-row lg:items-center lg:justify-between">
    <div>
      <h2 class="text-lg font-semibold text-neutral-900">Prefer a path to a pile?</h2>
      <p class="mt-1.5 text-sm text-neutral-500">Three guides, in order, taking you from an empty workspace to a scheduled report.</p>
      <div class="mt-5 flex flex-wrap gap-6">
        <p class="flex items-center gap-2 text-sm text-neutral-600"><span class="grid h-6 w-6 place-items-center rounded-full border border-neutral-300 text-xs">1</span> Connect a source</p>
        <p class="flex items-center gap-2 text-sm text-neutral-600"><span class="grid h-6 w-6 place-items-center rounded-full border border-neutral-300 text-xs">2</span> Build a dashboard</p>
        <p class="flex items-center gap-2 text-sm text-neutral-600"><span class="grid h-6 w-6 place-items-center rounded-full border border-neutral-300 text-xs">3</span> Schedule the report</p>
      </div>
    </div>
    <button class="shrink-0 rounded-xl bg-neutral-900 px-6 py-3 text-sm font-medium text-white transition hover:bg-neutral-800">Start the path</button>
  </div>
</section>