Docs footer with prev and next

Design a documentation page footer with Tailwind CSS. Start with a feedback row: a bordered rounded-xl strip asking whether the page was helpful, with two outline buttons carrying thumb glyphs on the right and a muted line under the question naming the last update date. Below it, a two-cell grid of previous and next page links: each is a bordered rounded-xl card with a tiny uppercase direction label, an arrow on the appropriate side, the page title in medium weight and a one-line description, with the next card right-aligned. Beneath, a thin row of three utility links with glyphs — edit this page on GitHub, report an issue, and view the page history — separated on wider screens and stacked on small ones. End with a muted line giving the documentation version and a link to older versions.

<footer class="mx-auto max-w-3xl px-6 pb-16">
  <div class="flex flex-wrap items-center justify-between gap-4 rounded-xl border border-neutral-200 bg-neutral-50 px-6 py-5">
    <div>
      <p class="text-sm font-medium text-neutral-900">Was this page helpful?</p>
      <p class="mt-0.5 text-xs text-neutral-500">Last updated 14 August 2026 by Mira Osei</p>
    </div>
    <div class="flex gap-2">
      <button class="flex items-center gap-2 rounded-xl border border-neutral-200 bg-white px-4 py-2 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50"><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 10v11H3V10h4Zm0 9h10.2a2 2 0 0 0 1.9-1.4l1.7-5A2 2 0 0 0 18.9 10H15l.7-3.1A3.2 3.2 0 0 0 12.5 3L7 10Z"/></svg> Yes</button>
      <button class="flex items-center gap-2 rounded-xl border border-neutral-200 bg-white px-4 py-2 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50"><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 14V3H3v11h4Zm0-9h10.2a2 2 0 0 1 1.9 1.4l1.7 5a2 2 0 0 1-1.9 2.6H15l.7 3.1a3.2 3.2 0 0 1-3.2 3.9L7 14Z"/></svg> No</button>
    </div>
  </div>

  <div class="mt-6 grid gap-3 sm:grid-cols-2">
    <a href="#" class="group rounded-xl border border-neutral-200 p-5 transition hover:border-neutral-300 hover:bg-neutral-50">
      <p class="text-[11px] font-medium uppercase tracking-widest text-neutral-400">Previous</p>
      <p class="mt-2 flex items-center gap-2 text-sm font-medium text-neutral-900">
        <span class="text-neutral-400 transition group-hover:-translate-x-0.5">←</span> Connecting a warehouse
      </p>
      <p class="mt-1 text-xs text-neutral-500">Roles, allow lists and the first sync.</p>
    </a>

    <a href="#" class="group rounded-xl border border-neutral-200 p-5 text-right transition hover:border-neutral-300 hover:bg-neutral-50">
      <p class="text-[11px] font-medium uppercase tracking-widest text-neutral-400">Next</p>
      <p class="mt-2 flex items-center justify-end gap-2 text-sm font-medium text-neutral-900">
        Scheduling exports <span class="text-neutral-400 transition group-hover:translate-x-0.5">→</span>
      </p>
      <p class="mt-1 text-xs text-neutral-500">Cron expressions, delivery targets and retries.</p>
    </a>
  </div>

  <div class="mt-8 flex flex-col gap-3 border-t border-neutral-200 pt-6 text-sm sm:flex-row sm:items-center sm:justify-between">
    <div class="flex flex-wrap gap-x-6 gap-y-2">
      <a href="#" class="flex items-center gap-2 text-neutral-500 transition hover:text-neutral-900"><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="M15 21v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.7-1.4 5.7-6.2 0-1.4-.5-2.5-1.3-3.4.1-.3.6-1.7-.1-3.4 0 0-1.1-.3-3.6 1.3a12.4 12.4 0 0 0-6.5 0C6.2 2.2 5.1 2.5 5.1 2.5c-.7 1.7-.2 3.1-.1 3.4a5 5 0 0 0-1.3 3.4c0 4.8 2.9 5.9 5.7 6.2-.5.5-.6 1-.5 2V21"/><path d="M9 18c-2.7.8-2.7-1.3-3.8-1.6"/></svg> Edit this page</a>
      <a href="#" class="flex items-center gap-2 text-neutral-500 transition hover:text-neutral-900"><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> Report an issue</a>
      <a href="#" class="flex items-center gap-2 text-neutral-500 transition hover:text-neutral-900"><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"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></svg> Page history</a>
    </div>
    <p class="text-xs text-neutral-400">
      Docs for <span class="font-mono">v4.2</span> · <a href="#" class="underline underline-offset-2 hover:text-neutral-700">older versions</a>
    </p>
  </div>
</footer>