Banner

Tailwind CSS and Alpine JS Banner

Banners are a great way to display important information or messages in a visually appealing format. They can be used to inform users about promotions, sales, and more.

Simple banner

A simple banner with a text, link and a dismiss button.

Limited Time Offer! Explore exclusive deals & savings

HTML 
<div class="">
    <p class="">Limited Time Offer! Explore exclusive <a href="#" class="">deals & savings</a> </p>
</div>

Banner with button

A banner with a text and an action button.

Get Fit Anywhere, Anytime 💪

HTML 
<div class="">
    <div class="">
        <p class="">Get Fit Anywhere, Anytime 💪</p>
        <button type="button" class="">Start free trial</button>
    </div>
</div>

Fixed banner

A fixed banner that sticks to the top of the screen.

Limited Time Offer! Explore exclusive deals & savings

loading
HTML 
<div class="">
    <p class="">Limited Time Offer! Explore exclusive <a href="#" class="">deals & savings</a> </p>
</div>

Cookie banner

A cookie banner that informs users about the use of cookies on the website.

Cookie Time!

We use cookies to make your experience sweet and crispy. For more information, please read our Privacy Policy.

HTML 
<div class="">
    <!-- Header -->
    <div class="">
        <h3 class="">
            <span class="" aria-hidden="true">🍪</span>
            Cookie Time!
        </h3>
    </div>

    <!-- Body -->
    <div class="">
        <p class="">
            We use cookies to make your experience sweet and crispy. For more information, please read our <a href="#" class="">Privacy Policy</a>
        </p>
    </div>

    <!-- Footer -->
    <div class="">
        <button type="button" class="">No, thank you</button>
        <button type="button" class="">Sounds Good!</button>
    </div>
</div>

Keyboard Navigation

Key Action
Tab Next focusable element gets the focus
Space Enter Focused item gets selected