Home
Leon Bachmann
Promotional sticky top section

Promotional sticky top section

This tailwind example is contributed by Leon Bachmann, on 09-Dec-2022. Component is made with Tailwind CSS v3. It is responsive.

Header Banner

Author Leon Bachmann

12.1k

Fork Fullscreen

<div class="fixed inset-x-0 top-0 z-50">
    <div class="bg-teal-600">
        <div class="mx-auto max-w-7xl py-3 px-3 sm:px-6 lg:px-8">
            <div class="flex flex-col items-center justify-between lg:flex-row lg:justify-center">
                <div class="flex flex-1 items-center lg:mr-3 lg:flex-none">
                    <p class="ml-3 text-center font-medium text-white">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                            stroke="currentColor" aria-hidden="true" class="mr-2 hidden h-6 w-6 lg:inline">
                            <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>To celebrate our
                        <<span class="font-semibold">Big Version 3</span> release, use
                        <span class="font-black">VERSION3</span> code to get <span class="font-black">50% off</span>
                    </p>
                </div>
                <div class="mt-2 w-full flex-shrink-0 lg:mt-0 lg: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-teal-600 shadow-sm hover:bg-teal-50"
                        href="#pricing">Buy now
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

Promotional notification
sticky bottom promotional banner

Author:
Laurits

2 years ago

10k
page heaading stacked
yeah booy, oh booy, o buy

Author:
Anonymous

1 year ago

9.4k
Navigation Bar Responsive

Author:
SAI BENDE

1 year ago

9.6k
Black friday sale / deal banner

Author:
Conan Hilton

2 years ago

10k
cards
cards slices

Author:
Anonymous

1 year ago

6.5k
Full width header with gradient
Header component for showing Info.

Author:
TailwindFlex

3 years ago

13.2k
Hero section
Hero section for your project

Author:
Prajwal Hallale

3 years ago

9k
Hero Section
A 2 column responsive hero section

Author:
Emdadul Islam

1 year ago

2.3k
3D Animation Studio
3D animation is the process of creating three-dimensional products, objects, backgrounds, etc., and setting them in motion within a digital environment. It's commonly used for the web, social media marketing, product design, film, cartoons, commercials, and video games.

Author:
Nicole Shalom

3 months ago

849
Tailwind css banner offer
Bold neobrutalist design with thick borders, vibrant colors, and strong shadows - perfect for promotions.

Author:
saim-t8

3 weeks ago

273
Join Our Community Banner
Encourage users to become members of a community.

Author:
Diego Chavez

1 year ago

8.3k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

9 months ago

3.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components