Follow Card

<!--
  Static markup. The follow button's active state is expressed with aria-pressed
  in the React tabs; here it is shown in the resting (not-following) state. The
  avatar is initials on a gradient - no <img> to break.
-->
<div class="w-full max-w-sm rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
  <div class="flex items-start gap-3">
    <span class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-violet-600 text-sm font-bold text-white" aria-hidden="true">AR</span>
    <div class="min-w-0 flex-1">
      <p class="truncate font-semibold text-gray-900 dark:text-gray-100">Ada Ross</p>
      <p class="truncate text-sm text-gray-500 dark:text-gray-400">&#64;adaross</p>
    </div>
    <button type="button" aria-pressed="false" class="shrink-0 rounded-full bg-gray-900 px-4 py-1.5 text-sm font-semibold text-white transition-colors hover:bg-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">
      Follow
    </button>
  </div>
  <p class="mt-3 text-sm leading-relaxed text-gray-600 dark:text-gray-300">
    Design engineer. Writing about interfaces, type and the web.
  </p>
</div>