Tailwind CSS Sticky Banner - Flowbite

Get started with the sticky banner component coded with Tailwind CSS and Flowbite to show marketing, informational and CTA messages to your website visitors fixed to the top or bottom part of the page as the user scroll down the main content area.

Explore the following examples based on various styles, sizes, and positionings to leverage the sticky banner component and increase marketing conversions with a responsive element supporting dark mode.

Default sticky banner #

Use this free example to show a text message for announcement with a CTA link, an icon element and a close button to dismiss the banner.

Bottom banner position #

This example can be used to position the sticky banner to the bottom side of the page instead of the top side.

Marketing CTA banner #

Use this free example to show a text message for announcement with a CTA link, an icon element and a close button to dismiss the banner. Set a different width by using the max-w-{*} utility classes from Tailwind CSS.

Edit on GitHub

Toggle full view

Toggle full screen

Toggle tablet view

Toggle tablet view

Toggle mobile view

Toggle mobile view

RTL

Toggle RTL mode

Toggle dark/light mode

Toggle dark mode

Loading...

• HTML

Copy

Copy to clipboard

Flowbite

Build websites even faster with components on top of Tailwind

Sign Up Close banner Close

<div id="marketing-banner" tabindex="-1" class="fixed z-50 flex flex-col md:flex-row justify-between w-[calc(100%-2rem)] p-4 -translate-x-1/2 bg-neutral-primary-soft border border-default rounded-base shadow-xs lg:max-w-7xl left-1/2 top-6"> <div class="flex flex-col items-start mb-3 me-4 md:items-center md:flex-row md:mb-0"> <a href="https://flowbite.com/" class="flex items-center mb-2 border-default md:pe-4 md:me-4 md:border-e md:mb-0"> <img src="https://flowbite.com/docs/images/logo.svg" class="h-6 me-2" alt="Flowbite Logo"> <span class="text-heading self-center text-lg font-semibold whitespace-nowrap">Flowbite</span> </a> <p class="flex items-center text-sm font-normal text-body">Build websites even faster with components on top of Tailwind</p> </div> <div class="flex items-center shrink-0"> <button type="button" class="text-white bg-brand hover:bg-brand-strong box-border border border-transparent focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-xs px-3 py-1.5 focus:outline-none me-2">Sign Up</button> <button data-dismiss-target="#marketing-banner" type="button" class="hidden shrink-0 md:inline-flex justify-center text-sm w-7 h-7 items-center text-body hover:bg-neutral-tertiary hover:text-heading rounded-sm"> <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg> <span class="sr-only">Close banner</span> </button> <button type="button" class="md:hidden text-body bg-neutral-primary-soft border border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary-soft shadow-xs font-medium leading-5 rounded-base text-xs px-3 py-1.5 focus:outline-none">Close</button> </div> </div>

Expand code

Newsletter sign-up banner #

This example can be used to encourage your website visitors to sign up to your email newsletter by showing an inline form inside the sticky banner on the top side of your page.

Informational banner #

This example can be used to share important information with your website visitors by showing a heading and a paragraph inside the sticky banner and two CTA buttons with links.

More examples #

For more sticky banner examples you can check banner sections from Flowbite Blocks.