Home
Laurits
Promotional notification

Promotional notification

sticky bottom promotional banner

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

Banner Notification

Author Laurits

10k

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

Author:
Leon Bachmann

2 years ago

12.4k
Cookie consent
Sticky Bottom Cookie Consent Notification

Author:
Sophia Baker

2 years ago

10.7k
Cookie consent banner

Author:
Leif99

2 years ago

16.8k
Black friday sale / deal banner

Author:
Conan Hilton

2 years ago

10.1k
Notification Alert Section
Notification card with close button

Author:
Prashant

3 years ago

12.9k
Floating dismissible notification
bottom right floating alert

Author:
Prashant

3 years ago

13.4k
Icon Notification Badge with Count

Author:
Arya

2 years ago

14.2k
Product hunt showcase

Author:
Lukas Müller

2 years ago

12.3k
Dismissible alert bar

Author:
Simon Scheffer

2 years ago

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

Author:
Code huit

2 years ago

15.6k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

165
Your Creative Login Page
"Animated Image Login UI" "Tailwind Image Login with Animated Background" "Innovative User Login Experience" "Creative Bubble Background Login" "Login with Personality — Featuring Your Image" "Acode Master Animated Login" ✅ (customized for you)

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

577

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components