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.5k

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

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

Author:
Anonymous

2 years ago

9.8k
Navigation Bar Responsive

Author:
SAI BENDE

1 year ago

9.9k
Black friday sale / deal banner

Author:
Conan Hilton

2 years ago

10.4k
cards
cards slices

Author:
Anonymous

2 years ago

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

Author:
TailwindFlex

3 years ago

13.3k
Hero section
Hero section for your project

Author:
Prajwal Hallale

3 years ago

9.1k
Hero Section
A 2 column responsive hero section

Author:
Emdadul Islam

1 year ago

2.7k
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

7 months ago

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

Author:
saim-t8

4 months ago

451
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

1 year ago

3.8k
Africa Solex Ltd
Description (ibisobanuro bya website) ni text ngufi isobanura neza icyo urubuga cyangwa sosiyete yawe ikora, ikaba ifasha no mu byerekeye SEO (Search Engine Optimization). Mu nyandiko za HTML, description ishyirwa muri meta tag muri <head>.

Author:
Ele Eriksen

7 months ago

406

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components