Breadcrumb page header

Design an application page header with Tailwind CSS. The top line is a breadcrumb of four levels separated by chevrons, the last one in medium neutral-900 and the earlier ones muted links, with a small overflow ellipsis button standing in for a collapsed middle level. Below it, a flex row that wraps: on the left a record title as a large heading with a small status pill beside it and, underneath, a muted metadata line with three items separated by dots — owner, created date and identifier in monospace; on the right, a button group of a bordered "Duplicate", a bordered "Share" and a dark primary "Publish", plus a square more-actions button with three dots. Under everything, a row of five tabs with a bottom border where the active tab carries a neutral-900 underline, and one tab shows a small count badge.

<header class="border-b border-neutral-200 bg-white">
  <div class="mx-auto max-w-6xl px-6 pt-6">
    <nav class="flex items-center gap-2 text-sm text-neutral-500">
      <a href="#" class="transition hover:text-neutral-900">Workspaces</a>
      <span class="text-neutral-300">›</span>
      <a href="#" class="transition hover:text-neutral-900">Studioform</a>
      <span class="text-neutral-300">›</span>
      <button class="rounded px-1 text-neutral-400 transition hover:bg-neutral-100 hover:text-neutral-700" aria-label="Show hidden levels">⋯</button>
      <span class="text-neutral-300">›</span>
      <span class="font-medium text-neutral-900">Monthly revenue</span>
    </nav>

    <div class="mt-5 flex flex-wrap items-start justify-between gap-4">
      <div>
        <div class="flex flex-wrap items-center gap-3">
          <h1 class="text-2xl font-semibold tracking-tight text-neutral-900">Monthly revenue</h1>
          <span class="rounded-full bg-amber-100 px-2.5 py-1 text-[11px] font-medium text-amber-700">Draft</span>
        </div>
        <p class="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-neutral-500">
          <span>Owned by Mira Osei</span><span class="text-neutral-300">·</span>
          <span>Created 14 Jul 2026</span><span class="text-neutral-300">·</span>
          <span class="font-mono text-xs">rep_8f21c94a</span>
        </p>
      </div>

      <div class="flex items-center gap-2">
        <button class="rounded-xl border border-neutral-200 px-3.5 py-2 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50">Duplicate</button>
        <button class="rounded-xl border border-neutral-200 px-3.5 py-2 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50">Share</button>
        <button class="rounded-xl bg-neutral-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-neutral-800">Publish</button>
        <button class="grid h-9 w-9 place-items-center rounded-xl border border-neutral-200 text-neutral-500 transition hover:bg-neutral-50" aria-label="More actions">⋯</button>
      </div>
    </div>

    <nav class="mt-6 flex gap-7 overflow-x-auto text-sm">
      <a href="#" class="border-b-2 border-neutral-900 pb-3 font-medium text-neutral-900">Overview</a>
      <a href="#" class="border-b-2 border-transparent pb-3 text-neutral-500 transition hover:text-neutral-900">Data</a>
      <a href="#" class="flex items-center gap-2 border-b-2 border-transparent pb-3 text-neutral-500 transition hover:text-neutral-900">
        Comments <span class="rounded-full bg-neutral-100 px-1.5 py-0.5 text-[10px] font-medium text-neutral-600">7</span>
      </a>
      <a href="#" class="border-b-2 border-transparent pb-3 text-neutral-500 transition hover:text-neutral-900">Schedule</a>
      <a href="#" class="border-b-2 border-transparent pb-3 text-neutral-500 transition hover:text-neutral-900">History</a>
    </nav>
  </div>
</header>