Get Lifetime Access to 12,400+ Components and UI Builder 👇
·
0days
0hours
0mins
0secs
·
🚀 Get it Now!

Tailwind Announcement Bar

Free

Tailwind announcement bar component with Alpine.js

Tailwind Announcement Bar Image 1
Details About Tailwind Announcement Bar
Key points:
  • Open Source
  • JavaScript Plugin
  • Copy & Paste
  • Tailwind CSS v3.0+
  • Responsive Design

 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>

FAQ

How do I install Alpine.js into my project?

To install Alpine.js in your project, you can use a CDN by adding a script tag to your HTML file. Alternatively, you can install it via npm by running the appropriate command in your terminal and then importing it into your JavaScript file. Visit alpinejs.dev/essentials/installation for the official install gudie.

Featured Tailwind Components

Discover the most popular Tailwind CSS ui components and elements. Browse top-notch Tailwind components to enhance your development process.