Promotional notification

sticky bottom promotional banner

This tailwind example is contributed by Laurits, on 12-Jan-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Toast, Snackbar

Banner Notification

Author Laurits

Tailwind v3.4 10.9k 15

Fork Fullscreen

<div class="fixed inset-x-0 bottom-0 pb-2 sm:pb-5 z-50">
    <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
        <div class="rounded-lg bg-indigo-600 p-2 shadow-lg sm:p-3">
            <div class="flex flex-wrap items-center justify-between">
                <div class="flex w-0 flex-1 items-center">
                    <span class="flex rounded-lg bg-indigo-800 p-2">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="h-6 w-6 text-white"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"></path></svg>
                    </span>
                    <p class="ml-3 truncate font-medium text-white">
                        <span class="md:hidden">Save 50% on any plan with Code 'LAUNCH'</span>
                        <span class="hidden md:inline">Launch Month! Use Code 'LAUNCH' to save 50% on any plan!</span>
                    </p>
                </div>
                <div class="order-3 mt-2 w-full flex-shrink-0 sm:order-2 sm:mt-0 sm:w-auto">
                    <a class="flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-2 text-sm font-medium text-indigo-600 shadow-sm hover:bg-indigo-50"
                        href="#">Get Started
                    </a>
                </div>
                <div class="order-2 flex-shrink-0 sm:order-3 sm:ml-2">
                    <button type="button" class="-mr-1 flex rounded-md p-2 hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-white"><span class="sr-only">Dismiss</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-6 w-6 text-white"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.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 010-1.414z" clip-rule="evenodd"></path></svg></button>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

Promotional sticky top section

Leon Bachmann

3 years ago

13.3k
Cookie consent
Sticky Bottom Cookie Consent Notification

Sophia Baker

3 years ago

11.1k
Cookie consent banner

Leif99

3 years ago

18.2k
Black friday sale / deal banner

Conan Hilton

3 years ago

11.4k
Notification Alert Section
Notification card with close button

Prashant

4 years ago

13.9k
Floating dismissible notification
bottom right floating alert

Prashant

4 years ago

14.4k
Icon Notification Badge with Count

Arya

3 years ago

15.2k
Product hunt showcase

Lukas Müller

3 years ago

13k
Dismissible alert bar

Simon Scheffer

3 years ago

10.5k
Toast
mensajes de alerta a los visitantes de su sitio web.

Code huit

3 years ago

16.7k
Banner - Hero - Splash Section

ABDO-SY

1 year ago

1.9k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Abhiraj

1 year ago

2.2k