COMPONENTS · SECTIONS

Tailwind Announcement Bar Components & Sections

Instant, responsive Tailwind announcement bars for promos, cookie notices or alerts: dismissible, colour-tunable, and copy-paste ready in seconds.

5 sections1 freeTailwind CSS v4HTML · React · MCP

Pick sectionsTailkits UI

FREE ANNOUNCEMENT BAR SECTIONS · COPY AND PASTE

All free sections

Announcement Bar: Promo with Close

Minimal, full-width promo bar with a discount code, short message, and a close button.

Free
Full-width previewnpx shadcn@latest add https://tailkits.com/r/free-announcement-bar-1.json
View HTML code
<section class="bg-tk-surface-2 py-2">
  <div
    class="max-w-7xl mx-auto px-4 xl:px-0 flex items-center justify-between gap-x-2"
  >
    <div
      class="flex w-full grow items-center gap-x-2 justify-self-center md:justify-center"
    >
      <div
        class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-tk-md inline-flex bg-primary text-primary-foreground px-2 py-0.5"
      >
        <svg
          class="h-3 shrink-0 mr-1.5 text-tk-primary-foreground-muted"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          aria-hidden="true"
          data-slot="icon"
        >
          <path
            fill-rule="evenodd"
            d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z"
            clip-rule="evenodd"
          />
        </svg>
        PH10
      </div>
      <div class="text-sm font-medium text-card-foreground">
        Enjoy exclusive discounts
      </div>
    </div>
    <button
      data-tk-hover="press"
      class="flex h-6 w-6 cursor-pointer items-center justify-center rounded-tk-3xl bg-tk-fill p-1 transition hover:bg-tk-fill-strong"
      type="button"
      aria-label="Close bar"
    >
      <svg
        class="h-4 text-muted-foreground"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        aria-hidden="true"
        data-slot="icon"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M6 18 18 6M6 6l12 12"
        />
      </svg>
    </button>
  </div>
</section>

4 MORE ANNOUNCEMENT BAR SECTIONS IN TAILKITS UI

See plans

MORE TAILWIND SECTIONS

Hero 31Features 23How It Works 20Testimonial 13Footer 12Pricing 10Call to Action 9Navbar 9Newsletter 9Blog 7Contact 7FAQ 7Header 7Logo Cloud 7Team 7Sign In 6Sign Up 6Stats 6Waitlist 6Comparison 5Integrations 5Launch 5Roadmap 5Blog Content 3Launch Badges 3Bento Grid 2Coming Soon 2
GOOD TO KNOW

Frequently asked questions

Answers to common questions about Tailwind announcement bar components.

Are these Tailwind announcement bar sections free?

1 of the 5 announcement bar sections on this page are free (Promo with Close): copy the HTML above, no account needed. The other 4 are part of Tailkits UI, the paid library; each shows a preview here and unlocks its code with a Tailkits UI plan.

Which Tailwind CSS version do the announcement bar components use?

Tailwind CSS v4. The code is plain HTML with utility classes; colours, radii and shadows read CSS variables named like shadcn/ui's (bg-primary, text-muted-foreground), so a shadcn theme or a DESIGN.md export reskins every section. Add tailkits-theme.css next to the code for the default look.

Can I use these announcement bar sections in React or Next.js?

Yes. Every section is also a React component in the @tailkits shadcn registry. Free sections install without an account, for example: npx shadcn@latest add https://tailkits.com/r/free-<name>.json. Paid sections install with the token from your Tailkits UI account.

Can an AI coding assistant add a announcement bar section for me?

Yes. The Tailkits MCP at tailkits.com/mcp is free and open, with no account: Claude Code, Cursor and other MCP clients can search the announcement bar sections and insert the code into your project. A Tailkits UI token unlocks the Pro section code.