Footer with latest updates

Create a footer with Tailwind CSS that gives editorial content equal weight to navigation. Use a two-part grid: on the left, spanning two of five columns, a heading reading "Latest from the journal" and three post rows, each a link with a small monospaced date, a two-line title in medium weight and a hairline divider between them, plus a text link to the archive with an arrow. On the right, three narrow link columns headed Product, Developers and Company. Below a divider, a compact bottom bar with the wordmark on the left, a centred row of four tiny legal links, and a language select on the right. Use a white background, neutral-200 hairlines and hover states that only shift text colour, keeping the whole thing quiet enough to sit under a long page.

<footer class="border-t border-neutral-200 bg-white">
  <div class="mx-auto max-w-6xl px-6 py-14">
    <div class="grid gap-10 lg:grid-cols-5">
      <div class="lg:col-span-2">
        <p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Latest from the journal</p>
        <div class="mt-5 space-y-0">
          <a href="#" class="block border-b border-neutral-200 py-3.5 transition hover:bg-neutral-50">
            <span class="font-mono text-xs text-neutral-400">14 Aug 2026</span>
            <span class="mt-1 block text-sm font-medium leading-snug text-neutral-900">What we learned running Postgres upgrades on 4,000 tenants</span>
          </a>
          <a href="#" class="block border-b border-neutral-200 py-3.5 transition hover:bg-neutral-50">
            <span class="font-mono text-xs text-neutral-400">02 Aug 2026</span>
            <span class="mt-1 block text-sm font-medium leading-snug text-neutral-900">Query caching is now on for every plan, including free</span>
          </a>
          <a href="#" class="block border-b border-neutral-200 py-3.5 transition hover:bg-neutral-50">
            <span class="font-mono text-xs text-neutral-400">21 Jul 2026</span>
            <span class="mt-1 block text-sm font-medium leading-snug text-neutral-900">A post-mortem on the 41-minute degradation in eu-central</span>
          </a>
        </div>
        <a href="#" class="mt-4 inline-block text-sm font-medium text-neutral-900 underline-offset-4 hover:underline">All posts <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>
        <p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Product</p>
        <ul class="mt-5 space-y-2.5 text-sm text-neutral-500">
          <li><a href="#" class="transition hover:text-neutral-900">Overview</a></li>
          <li><a href="#" class="transition hover:text-neutral-900">Workflows</a></li>
          <li><a href="#" class="transition hover:text-neutral-900">Pricing</a></li>
          <li><a href="#" class="transition hover:text-neutral-900">Security</a></li>
        </ul>
      </div>

      <div>
        <p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Developers</p>
        <ul class="mt-5 space-y-2.5 text-sm text-neutral-500">
          <li><a href="#" class="transition hover:text-neutral-900">Documentation</a></li>
          <li><a href="#" class="transition hover:text-neutral-900">API reference</a></li>
          <li><a href="#" class="transition hover:text-neutral-900">SDKs</a></li>
          <li><a href="#" class="transition hover:text-neutral-900">Status</a></li>
        </ul>
      </div>

      <div>
        <p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Company</p>
        <ul class="mt-5 space-y-2.5 text-sm text-neutral-500">
          <li><a href="#" class="transition hover:text-neutral-900">About</a></li>
          <li><a href="#" class="transition hover:text-neutral-900">Careers</a></li>
          <li><a href="#" class="transition hover:text-neutral-900">Customers</a></li>
          <li><a href="#" class="transition hover:text-neutral-900">Contact</a></li>
        </ul>
      </div>
    </div>

    <div class="mt-12 flex flex-col items-center gap-4 border-t border-neutral-200 pt-6 md:flex-row md:justify-between">
      <p class="text-sm font-semibold tracking-tight text-neutral-900">Halden</p>
      <div class="flex flex-wrap justify-center gap-5 text-xs text-neutral-400">
        <a href="#" class="transition hover:text-neutral-700">Terms</a>
        <a href="#" class="transition hover:text-neutral-700">Privacy</a>
        <a href="#" class="transition hover:text-neutral-700">Cookies</a>
        <a href="#" class="transition hover:text-neutral-700">DPA</a>
      </div>
      <select class="rounded-lg border border-neutral-200 px-2.5 py-1.5 text-xs text-neutral-600 outline-none">
        <option>English</option>
        <option>Deutsch</option>
        <option>Français</option>
      </select>
    </div>
  </div>
</footer>