Announcement Bar

<!--
  A page-top notice. Message and link stack below sm so nothing overflows at
  320px; the close control is a 40px square tap target. The dismiss is wired in
  the React/TS variants - this markup is the visible shell.
-->
<div class="w-full bg-blue-600 text-white">
  <div class="mx-auto flex max-w-6xl items-center gap-3 px-4 py-2.5">
    <p class="flex min-w-0 flex-1 flex-col items-center gap-x-2 gap-y-0.5 text-center text-sm sm:flex-row sm:justify-center">
      <span>New: real-time collaboration is now in public beta.</span>
      <a href="#" class="inline-flex items-center gap-1 font-semibold underline underline-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-blue-600">
        Read the announcement <span aria-hidden="true">&rarr;</span>
      </a>
    </p>
    <button
      type="button"
      aria-label="Dismiss announcement"
      class="-mr-1.5 inline-flex h-10 w-10 flex-none items-center justify-center rounded-lg text-white/80 transition-colors hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-blue-600 motion-reduce:transition-none"
    >
      <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false">
        <path d="M18 6 6 18M6 6l12 12" stroke-linecap="round" />
      </svg>
    </button>
  </div>
</div>