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

9.3k

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

10.9k
Cookie consent
Sticky Bottom Cookie Consent Notification

Author:
Sophia Baker

2 years ago

9.9k
Cookie consent banner

Author:
Leif99

1 year ago

15.8k
Black friday sale / deal banner

Author:
Conan Hilton

1 year ago

9.3k
Floating dismissible notification
bottom right floating alert

Author:
Prashant

2 years ago

12.4k
Notification Alert Section
Notification card with close button

Author:
Prashant

2 years ago

11.2k
Icon Notification Badge with Count

Author:
Arya

2 years ago

12.8k
Product hunt showcase

Author:
Lukas Müller

2 years ago

11.6k
Dismissible alert bar

Author:
Simon Scheffer

1 year ago

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

Author:
Code huit

1 year ago

13.2k
Responsive Hero Section
Key features of this hero section: 1. Responsive layout: Uses a column layout on mobile and switches to a row layout on medium screens and larger. 2. Left side: - Company name as a large heading - Brief description - "Learn More" button 3. Right side: - "Why Choose Us?" section with bullet points - Two call-to-action buttons: "Get Started" and "Contact Sales" 4. Styling: - Uses Tailwind's utility classes for responsive design, colors, spacing, and typography - Incorporates a shadow and rounded corners for the right-side content box - Includes hover effects on buttons for better interactivity This hero section will be fully responsive: - On mobile devices, it will stack vertically with the company info on top and the details below. - On larger screens, it will display in a two-column layout. The use of Tailwind CSS classes ensures that the design is consistent and easily adjustable. You can further customize the colors, fonts, and spacing to match your brand's specific design guidelines. Would you like me to explain any part of this code or make any adjustments?

Author:
zobaidul kaziex

7 months ago

1.3k
Notification alert section
Show info, success, or error messages

Author:
Arya

2 years ago

9.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components