Announcement Bar

 Code Example

Announcement bar component with close button

<div x-data="{ showBanner: true }" x-show="showBanner" class="fixed top-0 left-0 w-full bg-gray-800 text-white p-2 flex justify-center items-center" x-cloak>
  <p class="text-sm mx-auto">Tailkits 2.0 is on Hacker News today 🎉</p>
  <button @click="showBanner = false" class="absolute right-4 text-white">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M10 9.293l4.293-4.293a1 1 0 011.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414L10 8.586z" clip-rule="evenodd" />
    </svg>
  </button>
</div>

Custom Background Color

Announcement Bar Component without close button

<div x-data="{ showBanner: true }" x-show="showBanner" class="fixed top-0 left-0 w-full bg-[#FF6600] text-white p-2 text-center" x-cloak>
  <p class="text-sm">Tailkits 2.0 is on Hacker News today 🎉</p>
</div>

Features ✨

• Close Button: Optional dismiss functionality via Alpine.js state control

• Custom Backgrounds: Easily swap colors or use hex values for branding

• Responsive Design: Full-width, mobile-friendly banner that adapts seamlessly

• Tailwind CSS v3 Support: Leverages utility classes for simplicity

• Alpine.js Plugin: Minimal JS footprint for show/hide states

FAQ

How do I install Alpine.js for the banner?

Include Alpine.js via CDN (<script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>) or install with npm install alpinejs and import it.

Can I change the banner’s background color?

Yes—just update the bg- utility class or apply a custom hex via bg-[#FF6600].

Does the banner support dismissing?

Absolutely. The close button uses Alpine’s x-show state to hide the banner when clicked.

Which Tailwind CSS version is required?

The component targets Tailwind CSS v3, but it can work with v2 if equivalent utility classes exist.