Article end matter with share rail

Build the closing section of an article with Tailwind CSS — everything after the final paragraph. Start with a horizontal rule, then an author card: an avatar, a name with a role line, two sentences of bio, and a bordered follow button on the right. Below, a share row with a small "Share this" label on the left and four bordered glyph buttons plus a "Copy link" button on the right. Then a bordered call-to-action strip with a heading, one line of copy and an inline email input with a dark button. Finish with a "Keep reading" block: a small heading and a three-column grid of related post cards, each with a category label, a title of up to two lines, and a footer of date and reading time. Then add JavaScript that copies the current URL when the copy button is clicked and swaps its label to "Copied" for two seconds.

<article class="mx-auto max-w-2xl px-6 py-12">
  <p class="leading-relaxed text-neutral-600">
    …which is why we stopped treating the backfill as a deployment step and started treating it as a product with its own progress bar, its own owner and its own rollback plan.
  </p>

  <hr class="my-10 border-neutral-200" />

  <div class="flex flex-col gap-4 rounded-2xl border border-neutral-200 p-6 sm:flex-row sm:items-start">
    <span class="grid h-14 w-14 shrink-0 place-items-center rounded-full bg-neutral-900 text-sm font-medium text-white">MO</span>
    <div class="min-w-0 flex-1">
      <p class="text-sm font-semibold text-neutral-900">Mira Osei</p>
      <p class="text-xs text-neutral-500">Staff engineer, storage team</p>
      <p class="mt-2.5 text-sm leading-relaxed text-neutral-600">Works on the parts of the system that are only interesting when they fail. Writes about migrations, on-call practice and the case for boring technology.</p>
    </div>
    <button class="shrink-0 rounded-xl border border-neutral-200 px-4 py-2 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50">Follow</button>
  </div>

  <div class="mt-6 flex flex-wrap items-center justify-between gap-3 border-y border-neutral-200 py-4">
    <p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Share this</p>
    <div class="flex items-center gap-2">
      <a href="#" class="grid h-9 w-9 place-items-center rounded-lg border border-neutral-200 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="M5 4l14 16M19 4 5 20"/></svg></a>
      <a href="#" class="grid h-9 w-9 place-items-center rounded-lg border border-neutral-200 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="M7 9v11M7 5v.01M11 20v-6.5a4.5 4.5 0 0 1 9 0V20M11 9v11"/></svg></a>
      <a href="#" class="grid h-9 w-9 place-items-center rounded-lg border border-neutral-200 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></a>
      <a href="#" class="grid h-9 w-9 place-items-center rounded-lg border border-neutral-200 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></a>
      <button id="shareCopy" class="rounded-lg border border-neutral-200 px-3 py-2 text-xs font-medium text-neutral-600 transition hover:bg-neutral-50">Copy link</button>
    </div>
  </div>

  <div class="mt-8 rounded-2xl border border-neutral-200 bg-neutral-50 p-6">
    <h2 class="text-base font-semibold text-neutral-900">One letter a week, usually about something that broke</h2>
    <p class="mt-1.5 text-sm text-neutral-500">No product announcements. 14,200 engineers read it on Thursdays.</p>
    <form class="mt-4 flex flex-col gap-2 sm:flex-row">
      <input type="email" placeholder="[email protected]" class="min-w-0 flex-1 rounded-xl border border-neutral-200 px-4 py-2.5 text-sm outline-none transition focus:border-neutral-900" />
      <button class="shrink-0 rounded-xl bg-neutral-900 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-neutral-800">Subscribe</button>
    </form>
  </div>

  <h2 class="mt-12 text-xs font-semibold uppercase tracking-widest text-neutral-400">Keep reading</h2>
  <div class="mt-4 grid gap-4 sm:grid-cols-3">
    <a href="#" class="rounded-xl border border-neutral-200 p-4 transition hover:border-neutral-300">
      <p class="text-[11px] font-medium uppercase tracking-widest text-neutral-400">Operations</p>
      <p class="mt-2 text-sm font-medium leading-snug text-neutral-900">On-call is a product decision</p>
      <p class="mt-3 text-xs text-neutral-400">10 Jul · 7 min</p>
    </a>
    <a href="#" class="rounded-xl border border-neutral-200 p-4 transition hover:border-neutral-300">
      <p class="text-[11px] font-medium uppercase tracking-widest text-neutral-400">Storage</p>
      <p class="mt-2 text-sm font-medium leading-snug text-neutral-900">The cost of a column</p>
      <p class="mt-3 text-xs text-neutral-400">26 Jun · 9 min</p>
    </a>
    <a href="#" class="rounded-xl border border-neutral-200 p-4 transition hover:border-neutral-300">
      <p class="text-[11px] font-medium uppercase tracking-widest text-neutral-400">Postmortem</p>
      <p class="mt-2 text-sm font-medium leading-snug text-neutral-900">Forty-one minutes in eu-central</p>
      <p class="mt-3 text-xs text-neutral-400">02 Jun · 14 min</p>
    </a>
  </div>
</article>

var copy = document.getElementById("shareCopy");

copy.addEventListener("click", function () {
  navigator.clipboard.writeText(location.href).then(function () {
    copy.textContent = "Copied";
    copy.classList.add("border-green-300", "text-green-700");
    setTimeout(function () {
      copy.textContent = "Copy link";
      copy.classList.remove("border-green-300", "text-green-700");
    }, 2000);
  });
});