announcementsBeginner

Top Announcement Bar

A slim banner at the top of the page announcing a new feature or release.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a top announcement bar with Tailwind: a slim horizontal strip across the very top of the page with centered content — a 'NEW' badge on the left, a short message in the middle, and a 'Learn more →' link on the right. Use a contrasting background (e.g. dark) so it sits above the main header.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/announcements/1.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-marketing-announcement
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class=" w-full">
<div class="border-b border-gray-200 bg-gray-100 px-4 py-2 text-gray-900">
      <p class="text-center font-medium">
        Lorem, ipsum dolor
        <a href="#" class="inline-block underline"> sit amet consectetur </a>
      </p>
    </div>
  </div>
</div>