Author profile with posts

Create an author page with Tailwind CSS. The top block is a card with a large avatar circle on the left, and on the right the name as a heading, a role line, a two-sentence bio, a row of three small social links with glyphs, and a bordered "Follow" button aligned to the right on wider screens. Under it, a thin stats row of three items separated by vertical rules — posts published, first post year and topics covered. Then a two-column layout from lg: the wide column lists five posts, each a row with a category label, a title in medium weight, a two-line excerpt and a footer of date and reading time; the narrow column is a sticky sidebar with a "Topics" list of five tag pills with counts, and a small bordered card promoting the author newsletter with a one-line pitch and a compact input and button.

<section class="mx-auto max-w-5xl px-6 py-14">
  <div class="rounded-2xl border border-neutral-200 bg-white p-8">
    <div class="flex flex-col gap-6 sm:flex-row sm:items-start">
      <span class="grid h-20 w-20 shrink-0 place-items-center rounded-full bg-neutral-900 text-xl font-medium text-white">MO</span>
      <div class="min-w-0 flex-1">
        <h1 class="text-2xl font-semibold tracking-tight text-neutral-900">Mira Osei</h1>
        <p class="mt-1 text-sm text-neutral-500">Staff engineer, storage team · Rotterdam</p>
        <p class="mt-4 max-w-xl leading-relaxed text-neutral-600">
          Mira works on the parts of the system that are only interesting when they fail. She writes mostly about migrations, on-call practice, and why the boring option usually wins.
        </p>
        <div class="mt-5 flex gap-2">
          <a href="#" class="grid h-8 w-8 place-items-center rounded-full 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-8 w-8 place-items-center rounded-full 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-8 w-8 place-items-center rounded-full 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>
        </div>
      </div>
      <button class="shrink-0 rounded-xl border border-neutral-200 px-4 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50">Follow</button>
    </div>

    <div class="mt-8 grid grid-cols-3 divide-x divide-neutral-200 border-t border-neutral-200 pt-6 text-center">
      <div><p class="text-lg font-semibold text-neutral-900">34</p><p class="mt-0.5 text-[11px] uppercase tracking-widest text-neutral-400">Posts</p></div>
      <div><p class="text-lg font-semibold text-neutral-900">2021</p><p class="mt-0.5 text-[11px] uppercase tracking-widest text-neutral-400">Writing since</p></div>
      <div><p class="text-lg font-semibold text-neutral-900">6</p><p class="mt-0.5 text-[11px] uppercase tracking-widest text-neutral-400">Topics</p></div>
    </div>
  </div>

  <div class="mt-10 grid gap-10 lg:grid-cols-[1fr_260px]">
    <div class="divide-y divide-neutral-200 border-t border-neutral-200">
      <article class="py-6">
        <p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Migrations</p>
        <h2 class="mt-2 text-lg font-medium text-neutral-900"><a href="#" class="underline-offset-4 hover:underline">A schema migration in four acts</a></h2>
        <p class="mt-2 leading-relaxed text-neutral-500">Expand, backfill, contract — and the uncomfortable weeks in between when both shapes have to be true at once.</p>
        <p class="mt-3 text-xs text-neutral-400">17 July 2026 · 11 min read</p>
      </article>
      <article class="py-6">
        <p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Operations</p>
        <h2 class="mt-2 text-lg font-medium text-neutral-900"><a href="#" class="underline-offset-4 hover:underline">On-call is a product decision</a></h2>
        <p class="mt-2 leading-relaxed text-neutral-500">Every incident that does not page someone is a feature another team will end up building twice, badly.</p>
        <p class="mt-3 text-xs text-neutral-400">10 July 2026 · 7 min read</p>
      </article>
      <article class="py-6">
        <p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Storage</p>
        <h2 class="mt-2 text-lg font-medium text-neutral-900"><a href="#" class="underline-offset-4 hover:underline">The cost of a column</a></h2>
        <p class="mt-2 leading-relaxed text-neutral-500">Adding one nullable field to a hot table, priced out through storage, index rebuilds and three years of backups.</p>
        <p class="mt-3 text-xs text-neutral-400">26 June 2026 · 9 min read</p>
      </article>
      <article class="py-6">
        <p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Postmortem</p>
        <h2 class="mt-2 text-lg font-medium text-neutral-900"><a href="#" class="underline-offset-4 hover:underline">Forty-one minutes in eu-central</a></h2>
        <p class="mt-2 leading-relaxed text-neutral-500">A connection pool, a health check and a deploy that was technically correct. The full timeline and what we changed.</p>
        <p class="mt-3 text-xs text-neutral-400">02 June 2026 · 14 min read</p>
      </article>
      <article class="py-6">
        <p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Practice</p>
        <h2 class="mt-2 text-lg font-medium text-neutral-900"><a href="#" class="underline-offset-4 hover:underline">Write the runbook first</a></h2>
        <p class="mt-2 leading-relaxed text-neutral-500">If you cannot describe how to recover from the failure, you do not understand the feature well enough to ship it.</p>
        <p class="mt-3 text-xs text-neutral-400">18 May 2026 · 6 min read</p>
      </article>
    </div>

    <aside class="lg:sticky lg:top-24 lg:self-start">
      <p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Topics</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <a href="#" class="rounded-full border border-neutral-200 px-3 py-1.5 text-xs text-neutral-600 transition hover:bg-neutral-50">Migrations <span class="text-neutral-400">9</span></a>
        <a href="#" class="rounded-full border border-neutral-200 px-3 py-1.5 text-xs text-neutral-600 transition hover:bg-neutral-50">Storage <span class="text-neutral-400">8</span></a>
        <a href="#" class="rounded-full border border-neutral-200 px-3 py-1.5 text-xs text-neutral-600 transition hover:bg-neutral-50">Operations <span class="text-neutral-400">7</span></a>
        <a href="#" class="rounded-full border border-neutral-200 px-3 py-1.5 text-xs text-neutral-600 transition hover:bg-neutral-50">Postmortems <span class="text-neutral-400">6</span></a>
        <a href="#" class="rounded-full border border-neutral-200 px-3 py-1.5 text-xs text-neutral-600 transition hover:bg-neutral-50">Practice <span class="text-neutral-400">4</span></a>
      </div>

      <div class="mt-8 rounded-xl border border-neutral-200 p-5">
        <p class="text-sm font-medium text-neutral-900">Mira writes on Thursdays</p>
        <p class="mt-1.5 text-xs leading-relaxed text-neutral-500">One letter a week, usually about something that went wrong first.</p>
        <form class="mt-4 space-y-2">
          <input type="email" placeholder="[email protected]" class="w-full rounded-lg border border-neutral-200 px-3 py-2 text-sm outline-none focus:border-neutral-900" />
          <button class="w-full rounded-lg bg-neutral-900 py-2 text-sm font-medium text-white transition hover:bg-neutral-800">Subscribe</button>
        </form>
      </div>
    </aside>
  </div>
</section>